CODEWITHSUNDEEP
javascripthtml
Harry
Harry

Reputation: 782

How to remove everything before/after the occurrence of a certain character using JavaScript (html)

So, I have a "custom" searchbar that fetches some html code and displays it under the input form. The incoming html is in this form:

enter image description here

And when I type in "ba" I get this result in the searchbar:

enter image description here

So, basically, I want to turn "33 | balloon Rides Daily (1)" into "balloon Rides Daily" How can I do this? thanks!

Full code: 

    <form>
        Search:
        <input type="text" id="searchbar">
        <br>
    </form>

    <div id="result"></div>

    <script>
        var term;

        $('#searchbar')
            .bind('keyup', function(e) {
                term = $(this).val();
                document.getElementById("result").innerHTML = "";
                console.log(term);
                getTags();
            });

        function getTags() {
            $.get("myaspscript", {
                needle: term
            }, function(data, status) {
                tags = data.split(", ");
                $(result).html(data);
                $($(result).find('ol').get().reverse()).each(function() {
                    $(this).replaceWith($('<ul>' + $(this).html() + '</ul>'))
                })
            });
        }
    </script>
</body>

EDIT

How the html looks: http://jsfiddle.net/gk2ud9fL/2/

Upvotes: 3

Views: 387

Answers (2)

OneHoopyFrood
OneHoopyFrood

Reputation: 3969

UPDATE: Given your comments and a more thorough reading of your code it appears that you have a couple problems.

1) Don't re-fetch the list every time a key is lifted. It wastes resources. Just get the list once and work with that data from there on out

2) If you have control over the data returned it would be far easier to return a JSON object with an array of all the list item values. I'll let you look up those terms if they're unfamiliar.

All that said, this will work for your case. First the regex:

/\d+\s\|\s(.*) \(\d+\)/g

This will match what you're trying to get. Implementation:

// Credit Shog9♦ here: 
// http://stackoverflow.com/questions/247023/get-an-array-of-list-element-contents-in-jquery
// Parses the list into an array and changes it's values.
var optionTexts = [];
(function changeAndStoreList(){
    $("ul li").each(function () {
        var regex = /\d+\s\|\s(.*) \(\d+\)/g;
        $(this).text(regex.exec($(this).text())[1]);
        optionTexts.push($(this).text());
    });
}());                   

// Search as we type
$('#searchbar').bind('keyup', function (e) {
    document.getElementById("result").innerHTML = "";
    if ($(this).val() !== "") {
        $("#result").text(search($(this).val(), optionTexts));
    }
});

// Simple search funcion
function search(needle, haystack) {
    for (var i = 0; i < haystack.length; i++) {
        if (haystack[i].match(needle)) {
            return haystack[i];
        }
    }
    return false;
}

This just parses the list into an array of it's values to make it nice and easy to work with. Then we search that array on each keypress and display the result.

Here's a fiddle to prove concept

Upvotes: 2

Rouse02
Rouse02

Reputation: 157

If you can, post the actual html code for that is being brought in. Otherwise, do this fore every item in your list:

  1. Separate the actual string that is contained inside the html from the html, just use the split('char');
  2. Take the now separated string and split it again using | and (
  3. Output the correct string located inside the result array.

Again, this is without seeing the html code.

Upvotes: 0

Related Questions