在搜索/突出显示点击 - >现有的div会被现有的span覆盖 [英] On search/highlight click -> existing div becomes wrapped with existing span

问题描述

我在javascript搜索和高亮文本方面遇到了问题。
例如，存在现有的span元素和现有的div元素。
问题是，如果我点击搜索按钮出于某种原因div元素成为span元素的子元素。

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

 函数highlightSearch（）{
 $ b $（'span'）。removeClass（ '突出'）; 
 var text = document.getElementById（'query'）。value; 
 var query = new RegExp（（\\\\+ text +\\b（？！（[^ <+）？>>）），gim）; 
 var e = document.getElementById（searchText）。innerHTML; 
 var enew = e.replace（/（< span class ='highlight'> |< \ / span>）/ igm，）; 
 document.getElementById（searchText）。innerHTML = enew; 
 var newe = enew.replace（query，< span class ='highlight'> $ 1< / span>）; 
 document.getElementById（searchText）。innerHTML = newe; 
 
  

检查问题： JSfiddle

解决方案

< / span> 标签来自 innerHTML 这一行：

  var enew = e.replace（/（< span class ='highlight'> |< \ / span>）/ igm，）; 
  

因此，< / span> .glyphicon 。这就是为什么元素被包装。

Btw：引发异常： ReferenceError：highlightSearch未定义

I have a problem with javascript search and highlight text. For example, there is existing span element and existing div element. Problem is that if I click on search button for some reason div element becomes a child of span element.

To explain it better I have created JS fiddle to show the problem:

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

Check problem on : JSfiddle

解决方案

Well, you are removing all </span> tags from the innerHTML in this line:

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

And therefore also the </span> of .glyphicon. This is why the element becomes wrapped.

Btw: An exception is thrown: ReferenceError: highlightSearch is not defined

这篇关于在搜索/突出显示点击 - >现有的div会被现有的span覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！