blocks|key|846563|text|如果使用jQuery，则可以对包含要搜索的文本的元素使用text属性。考虑到这个标记：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|846564|<p+id="the-text">
++The+dog+is+really+really+fat!
|code-block|syntax|javascript|846565|这会产生“狗真的很胖！”：|846566|$('#the-text').text();|846567|您可以在文本上执行regex搜索，而不是在标记中尝试这样做。|846568|如果没有jQuery，我无法确定从所有子元素中提取和连接文本节点的简单方法。|846569|entityMap^0|S|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|11|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

If you use jQuery, you can use the <code>text</code> property on the element containing the text you're searching for. Given this markup:

<pre><code>&lt;p id="the-text"&gt;
 The &lt;strong&gt;dog&lt;/strong&gt; is really &lt;em&gt;really&lt;/em&gt; fat!
&lt;/p&gt;
</code></pre>

This would yield "The dog is really really fat!":

<pre><code>$('#the-text').text();
</code></pre>

You could do your regex search on that text instead of trying to do so in the markup.

Without jQuery, I'm unsure of an easy way to extract and concatenate the text nodes from all child elements.

blocks|key|846580|text|娜雅..。只需使用好的旧RegExp+;)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|846581|var+htmlString+=+"The+dog+is+really+really+fat!";
var+regexp+=+/<\/?\w%2B((\s%2B\w%2B(\s*=\s*(?:\".*?"%7C'.*?'%7C[%5E'\">\s]%2B))?)%2B\s*%7C\s*)\/?>/gi;
var+result+=+'<span+class="highlight">'+%2B+htmlString.replace(regexp,+'')+%2B+'';|code-block|syntax|javascript|846582|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Naah... just use the good old RegExp ;)

<pre><code>var htmlString = "The &lt;strong&gt;dog&lt;/strong&gt; is really &lt;em&gt;really&lt;/em&gt; fat!";
var regexp = /&lt;\/?\w+((\s+\w+(\s*=\s*(?:\".*?"|'.*?'|[^'\"&gt;\s]+))?)+\s*|\s*)\/?&gt;/gi;
var result = '&lt;span class="highlight"&gt;' + htmlString.replace(regexp, '') + '&lt;/span&gt;';
</code></pre>

blocks|key|2728806|text|更新：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2728807|这是一个能做你想做的工作的小提琴。但是，您需要更新htmlTagRegEx来处理任何HTML标记上的匹配，因为这只是执行一个简单的匹配，而不是处理所有的情况。|CODE|2728808|http://jsfiddle.net/briguy37/JyL4J/|2728809|此外，下面是代码。基本上，它一个一个地取出html元素，然后在文本中进行替换，在匹配的选择周围添加突出显示范围，然后逐个推回html元素。很难看，但这是我能想到的最简单的办法.|2728810|function+highlightInElement(elementId,+text){
++++var+elementHtml+=+document.getElementById(elementId).innerHTML;
++++var+tags+=+[];
++++var+tagLocations=+[];
++++var+htmlTagRegEx+=+/<{1}\/{0,1}\w%2B>{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+=+'';
++++++++elementHtml+=+elementHtml.replace(text,+highlightHTMLStart+%2B+text+%2B+highlightHTMLEnd);

++++++++//plug+back+in+the+HTML+tags
++++++++var+textEndLocation+=+textLocation+%2B+text.length;
++++++++for(i=tagLocations.length-1;+i>=0;+i--){
++++++++++++var+location+=+tagLocations[i];
++++++++++++if(location+>+textEndLocation){
++++++++++++++++location+%2B=+highlightHTMLStart.length+%2B+highlightHTMLEnd.length;
++++++++++++}+else+if(location+>+textLocation){
++++++++++++++++location+%2B=+highlightHTMLStart.length;
++++++++++++}
++++++++++++elementHtml+=+elementHtml.substring(0,location)+%2B+tags[i]+%2B+elementHtml.substring(location);
++++++++}
++++}

++++//Update+the+innerHTML+of+the+element
++++document.getElementById(elementId).innerHTML+=+elementHtml;
}|code-block|syntax|javascript|2728811|entityMap|0|LINK|mutability|MUTABLE|url^0|0|3|0|P|C|0|0|Z|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|K|3|L|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|19|8|@]|D|@]|E|$P|Q]]|$1|R|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|J]]]]

Update:

Here is a working fiddle that does what you want. However, you will need to update the <code>htmlTagRegEx</code> to handle matching on any HTML tag, as this just performs a simple match and will not handle all the cases. 

<a href="http://jsfiddle.net/briguy37/JyL4J/" rel="noreferrer">http://jsfiddle.net/briguy37/JyL4J/</a>

Also, below is the code. Basically, it takes out the html elements one by one, then does a replace in the text to add the highlight span around the matched selection, and then pushes back in the html elements one by one. It's ugly, but it's the easiest way I could think of to get it to work...

<pre><code>function highlightInElement(elementId, text){
 var elementHtml = document.getElementById(elementId).innerHTML;
 var tags = [];
 var tagLocations= [];
 var htmlTagRegEx = /&lt;{1}\/{0,1}\w+&gt;{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 = '&lt;span class="highlight"&gt;';
 var highlightHTMLEnd = '&lt;/span&gt;';
 elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

 //plug back in the HTML tags
 var textEndLocation = textLocation + text.length;
 for(i=tagLocations.length-1; i&gt;=0; i--){
 var location = tagLocations[i];
 if(location &gt; textEndLocation){
 location += highlightHTMLStart.length + highlightHTMLEnd.length;
 } else if(location &gt; 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;
}
</code></pre>

blocks|key|2728829|text|可以用这个表达式</?\w*>替换字符串，这样就可以得到字符串|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2728830|entityMap^0|8|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You can use string replace with this expression <code>&lt;/?\w*&gt;</code> and you'll get your string

blocks|key|2728861|text|使用JQuery的一种更简单的方法是。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2728862|originalHtml+=+$("#div").html();

++++newHtml+=+originalHtml.replace(new+RegExp(keyword+%2B+"(?![%5E<>]*>)",+"g"),+function(e){
++++++++++++++++++++++return+"<span+class='highlight'>"+%2B+e+%2B+"";
+++++++++++++++++++});

$("#div").html(newHtml);|code-block|syntax|javascript|2728863|这对我来说很好。|2728864|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A simpler way with JQuery would be.

<pre><code>originalHtml = $("#div").html();

 newHtml = originalHtml.replace(new RegExp(keyword + "(?![^&lt;&gt;]*&gt;)", "g"), function(e){
 return "&lt;span class='highlight'&gt;" + e + "&lt;/span&gt;";
 });

$("#div").html(newHtml);
</code></pre>

This works just fine for me.

blocks|key|846641|text|下面是一个有效的regex示例，用于排除html标记和javascripts中的匹配：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|846642|http://refiddle.com/lwy6|offset|length|846643|在替换()脚本中使用此regex。|846644|++++/(a)(?!([%5E<])*?>)(?!<script[%5E>]*?>)(?![%5E<]*?<\/script>%7C$)/gi|code-block|syntax|javascript|846645|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

Here is a working regex example to exclude matches inside html tags as well as javascripts:

<a href="http://refiddle.com/lwy6" rel="nofollow noreferrer">http://refiddle.com/lwy6</a>

Use this regex in a replace() script.

<pre><code> /(a)(?!([^&lt;])*?&gt;)(?!&lt;script[^&gt;]*?&gt;)(?![^&lt;]*?&lt;\/script&gt;|$)/gi
</code></pre>

blocks|key|2710179|text|this.keywords.forEach(keyword+=>+{
++el.innerHTML+=+el.innerHTML.replace(
++++RegExp(keyword+%2B+'(?![%5E<>]*>)',+'ig'),
++++matched+=>+`<span+class=highlight>${matched}`
++)
})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2710180|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>this.keywords.forEach(keyword =&gt; {
 el.innerHTML = el.innerHTML.replace(
 RegExp(keyword + '(?![^&lt;&gt;]*&gt;)', 'ig'),
 matched =&gt; `&lt;span class=highlight&gt;${matched}&lt;/span&gt;`
 )
})
</code></pre>

Is it possible to match "the dog is really really fat" in "<code>The &lt;strong&gt;dog&lt;/strong&gt; is really &lt;em&gt;really&lt;/em&gt; fat!</code>" and add "<code>&lt;span class="highlight"&gt;WHAT WAS MATCHED&lt;/span&gt;</code>" around it?

I don't mean this specifically, but generally be able to search text ignoring HTML, keeping it in the end result, and just add the span above around it all?

EDIT: 
Considering the HTML tag overlapping problem, would it be possible to match a phrase and just add the span around each of the matched words? The problem here is that I don't want the word "dog" matched when it's not in the searched context, in this case, "the dog is really really fat."

JavaScript RegExp match text ignoring HTML

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

是否有可能与"The dog is really really fat!“中的”狗真的很胖“相匹配，并在它周围加上"WHAT WAS MATCHED”？我不是专门指这一点，但通常可以忽略HTML搜索文本，将...

问忽略JavaScript的RegExp匹配文本
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问忽略JavaScript的RegExp匹配文本EN