是否可以在“The <strong>dog</strong> is really <em>really</em> fat!
”中匹配“狗真的很胖”并在其周围加上“<span class="highlight">WHAT WAS MATCHED</span>
”?
我并不是故意这样做,但通常能够搜索忽略HTML的文本,将其保留在最终结果中,只是在上面添加跨度吗?
修改
考虑到HTML标签重叠问题,是否可以匹配一个短语并只是在每个匹配的单词周围添加跨度?这里的问题是,当不在搜索环境中时,我不希望“dog”这个词匹配,在这种情况下,“狗真的很胖。”
答案 0 :(得分:8)
<强>更新强>
这是一个可以做你想要的工作小提琴。但是,您需要更新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;
}
答案 1 :(得分:5)
Naah ......只需使用旧的RegExp;)
var htmlString = "The <strong>dog</strong> is really <em>really</em> fat!";
var regexp = /<\/?\w+((\s+\w+(\s*=\s*(?:\".*?"|'.*?'|[^'\">\s]+))?)+\s*|\s*)\/?>/gi;
var result = '<span class="highlight">' + htmlString.replace(regexp, '') + '</span>';
答案 2 :(得分:2)
使用JQuery的一种更简单的方法是。
originalHtml = $("#div").html();
newHtml = originalHtml.replace(new RegExp(keyword + "(?![^<>]*>)", "g"), function(e){
return "<span class='highlight'>" + e + "</span>";
});
$("#div").html(newHtml);
这对我来说很好。
答案 3 :(得分:1)
这是一个正常工作的正则表达式示例,用于排除html标记内的匹配以及javascripts:
在replace()脚本中使用此正则表达式。
/(a)(?!([^<])*?>)(?!<script[^>]*?>)(?![^<]*?<\/script>|$)/gi
答案 4 :(得分:0)
您可以对此表达式</?\w*>
使用字符串替换,您将获得字符串
答案 5 :(得分:0)
this.keywords.forEach(keyword => {
el.innerHTML = el.innerHTML.replace(
RegExp(keyword + '(?![^<>]*>)', 'ig'),
matched => `<span class=highlight>${matched}</span>`
)
})
答案 6 :(得分:-2)
如果您使用jQuery,则可以在包含您要搜索的文本的元素上使用text
属性。鉴于此标记:
<p id="the-text">
The <strong>dog</strong> is really <em>really</em> fat!
</p>
这会产生“狗真的很胖!”:
$('#the-text').text();
您可以对该文本进行正则表达式搜索,而不是尝试在标记中执行此操作。
如果没有jQuery,我不确定从所有子元素中提取和连接文本节点的简单方法。