Question

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

为了更好地解释它，我创建了JS小提琴以显示问题：

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

Answer 1

好吧，您要删除此行中</span>的所有innerHTML代码：

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

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

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

在搜索/突出显示单击 - ＆gt;现有的div会被现有的span包裹起来

1 个答案: