[英]Highlighting html text using javascript
我正在開發一個函數來突出顯示div中的html,我之前已經檢查了一些答案,但是沒有找到解決方案。 事實是,我實際上擁有的功能無法同時使用2對html標記,例如:
具有以下html代碼:
<span>Les malalties vasculars cerebrals (MVC)
conegudes també com a <i>feridures o ictus</i> representen la tercera causa de
而這個功能使用jQuery
jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
}
else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return skip;
}
return this.length && pat && pat.length ? this.each(function() {
innerHighlight(this, pat.toUpperCase());
}) : this;
};
jQuery.fn.removeHighlight = function() {
return this.find("span.highlight").each(function() {
this.parentNode.firstChild.nodeName;
with (this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};
如果我搜索:“ Les”效果很好 。
如果我搜索:“feridures”太正常工作。
但是,如果我搜索“ com a feridures”,該功能將不會突出顯示我的文字。
這是我完成應用程序的唯一步驟。
問題不在於HTML標簽,而是它,但是與兩個標簽無關。 這是您的應用程序正在搜索文字文本的事實,這意味着它找到的是“ com a feridures”而不是“ com a feridures”,因此沒有匹配項。
您可以使用jQuery首先將HTML剝離到范圍之外,然后它將起作用。
$(".highlight").html( $(".highlight").text() );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.