是否有可能在“< strong>狗< / strong>真的< em>真的< / em>脂肪！”中匹配“狗真的很胖”.并添加“< span class =”highlight“>匹配什么< / span>”周围？
我并不是故意这个,但通常能够搜索忽略HTML的文本,将其保留在最终结果中,只是在上面添加跨度吗？
编辑：
考虑到HTML标签重叠问题,是否可以匹配一个短语,只需在每个匹配的单词周围添加跨度？这里的问题是,当不在搜索环境中时,我不希望“狗”这个词匹配,在这种情况下,“狗真的很胖”.
解决方法
更新：
这是一个工作小提琴,做你想要的.但是,您需要更新htmlTagRegEx以处理任何HTML标记的匹配,因为这只是执行简单匹配而不会处理所有情况.
http://jsfiddle.net/briguy37/JyL4J/
此外,下面是代码.基本上,它逐个取出html元素,然后在文本中进行替换,在匹配的选择周围添加高亮区域,然后逐个推回html元素.这很难看,但这是我能想到的最简单的方法……
function highlightInElement(elementId,text){
var elementHtml = document.getElementById(elementId).innerHTML;
var tags = [];
var tagLocations= [];
var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/;
//Strip the tags from the elementHtml and keep track of them
var htmlTag;
while(htmlTag = elementHtml.match(htmlTagRegEx)){
tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
tags[tags.length] = htmlTag;
elementHtml = elementHtml.replace(htmlTag,'');
}
//Search for the text in the stripped html
var textLocation = elementHtml.search(text);
if(textLocation){
//Add the highlight
var highlightHTMLStart = '<span class="highlight">';
var highlightHTMLEnd = '</span>';
elementHtml = elementHtml.replace(text,highlightHTMLStart + text + highlightHTMLEnd);
//plug back in the HTML tags
var textEndLocation = textLocation + text.length;
for(i=tagLocations.length-1; i>=0; i--){
var location = tagLocations[i];
if(location > textEndLocation){
location += highlightHTMLStart.length + highlightHTMLEnd.length;
} else if(location > textLocation){
location += highlightHTMLStart.length;
}
elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location);
}
}
//Update the innerHTML of the element
document.getElementById(elementId).innerHTML = elementHtml;
}
