在 search/highlight 上点击 -> existing div 被现有的 span 包裹

Question

我在 javascript 搜索和突出显示文本时遇到问题。例如，存在现有的 span 元素和现有的 div 元素。问题是，如果我出于某种原因单击搜索按钮，div 元素将成为 span 元素的子元素。

为了更好地解释它，我创建了 JS fiddle 来显示问题：

function highlightSearch() {

    $('span').removeClass('highlighted');
    var text = document.getElementById('query').value;
    var query = new RegExp("(\b" + text + "\b(?!([^<]+)?>))", "gim");
    var e = document.getElementById("searchText").innerHTML;
    var enew = e.replace(/(<span class='highlighted'>|<\/span>)/igm, "");
    document.getElementById("searchText").innerHTML = enew;
    var newe = enew.replace(query, "<span class='highlighted'></span>");
    document.getElementById("searchText").innerHTML = newe;
}

检查问题：JSfiddle

Answer 1

好吧，您要从这一行的 innerHTML 中删除所有 </span> 标签：

var enew = e.replace(/(<span class='highlighted'>|<\/span>)/igm, "");

因此也是 .glyphicon 的 </span>。这就是元素被包裹的原因。

顺便说一句：抛出异常：ReferenceError: highlightSearch is not defined

在 search/highlight 上点击 -> existing div 被现有的 span 包裹

On search/highlight click -> existing div becomes wrapped with existing span

javascript

search

jquery

full-text-search

highlight