在搜索/突出显示单击-> 现有 div 被现有跨度包裹答案

【问题标题】：On search/highlight click -> existing div becomes wrapped with existing span在搜索/突出显示单击-> 现有 div 被现有跨度包裹
【发布时间】：2016-09-30 20:00:04
【问题描述】：

我在使用 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'>$1</span>");
    document.getElementById("searchText").innerHTML = newe;
}

检查问题：JSfiddle

【问题讨论】：

标签： javascript jquery search full-text-search highlight

【解决方案1】：

好吧，您将删除此行中 innerHTML 中的所有 </span> 标记：

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

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

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

【讨论】：