在搜索/突出显示点击 - >现有的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屋!