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

Question

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:

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

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/

Answer 1

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

Answer 2

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.