Question

我正在对JQuery中的自动完成进行文本匹配，方法是重载_renderItem方法以检查用户搜索的文本的JSON对象。找到它后，我将用带有“user_highlight_match”类的span标签替换它。

我正在进行多字搜索，所以“John Smi”会突出John，然后是Smi，搜索“John James Smi”会突出显示“John”和“Smi”。这个问题是，比如你搜索“John Las”，它会开始匹配span标签的class属性，如果它已经存在的话。我怎么能绕过这个？

编辑：这里有一些代码显示我在说什么：

renderItem = function(ul, item) {
    li = $('<li>', id: item._id);

    if this.term and not item.dialog
        terms = this.term.split(' ');

        for term in terms
            re = new RegExp("("+term+")", 'i');

            match = re.exec(item.name);
            if match
                item.name = item.name.replace re, "<span class=\"user_highlight_match\">+match[0]+</span>";
)

因此，第一个术语将匹配正常，但每次在此之后，如果您在html标签中搜索任何内容，则部分匹配将替换为标记。所以说“las”上有一场比赛，它会变成这样：

<span c<span class="user_highlight_match">Last</span>s="user_highlight_match">Last</span>

Answer 1

您必须搜索文本节点并将其替换为您想要的html。请参阅此问题：Find word in HTML。

编辑：这是我的答案的jQuery版本。

http://jsfiddle.net/gilly3/auJkG/

function searchHTML(searchString, htmlString) {
    var expr = new RegExp(searchString, "gi");
    var container = $("<div>").html(htmlString);
    var elements = container.find("*").andSelf();
    var textNodes = elements.contents().not(elements);
    textNodes.each(function() {
        var matches = this.nodeValue.match(expr);
        if (matches) {
            var parts = this.nodeValue.split(expr);
            for (var n = 0; n < parts.length; n++) {
                if (n) {
                    $("<span>").text(matches[n - 1]).insertBefore(this);
                }
                if (parts[n]) {
                    $(document.createTextNode(parts[n])).insertBefore(this);
                }
            }
            $(this).remove();
        }
    });
    return container.html();
}

替换文本但不替换HTML标记？

1 个答案: