如何使用 JavaScript (html) 在某个字符出现之前/之后删除所有内容

Question

所以，我有一个“自定义”搜索栏，它可以获取一些 html 代码并将其显示在输入表单下。传入的html是这样的形式：

当我输入“ba”时，我会在搜索栏中得到这个结果：

所以，基本上，我想把“33 | balloon Rides Daily (1)”变成“balloon Rides Daily”我该怎么做？谢谢！

完整代码：

    <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>

编辑

html 的外观：http://jsfiddle.net/gk2ud9fL/2/

Answer 1

更新：鉴于您的 cmets 和对代码的更彻底阅读，您似乎有几个问题。

1) 不要在每次提起键时重新获取列表。它浪费资源。只需获取一次列表，然后从那里开始使用该数据

2) 如果您可以控制返回的数据，那么返回一个包含所有列表项值的数组的 JSON 对象会容易得多。如果不熟悉这些术语，我会让你查一下。

说了这么多，这将适用于您的情况。首先是正则表达式：

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

这将匹配您想要获得的内容。实施：

// 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;
}

这只是将列表解析为它的值的数组，使其易于使用。然后我们在每次按键时搜索该数组并显示结果。

Here's a fiddle to prove concept

Answer 2

如果可以，请发布要引入的实际 html 代码。否则，请针对列表中的每个项目执行此操作：

1. 将 html 中包含的实际字符串与 html 分开，只需使用 拆分('char');
2. 获取现在分离的字符串并使用 | 再次拆分它和 (
3. 输出位于结果数组中的正确字符串。

同样，这是没有看到 html 代码。