Javascript：替换（）所有，但只有外部的HTML标签 [英] Javascript: replace() all but only outside html tags

问题描述

我有一个自动完成表单，当显示匹配用户搜索字符串的结果时，我想突出显示搜索字符串本身。我打算通过在标签中包含任何出现的搜索字符串来执行此操作，例如，或与给定的类一起使用。现在，问题是，当使用regEx我有问题，如果模式发生在一个html标签。
例如

  var searchPattern ='pa'; 
 var originalString ='要替换的< span class =something>的模式是pa，但只能在html标记< / span>之外; 
 
 var regEx = new RegExp（searchPattern，gi）
 
 var output = originalString.replace（regEx，< strong>+ searchPattern +<强>中）; 
 
 alert（输出）; 
  

（演示： http://jsfiddle.net/cumufLm3/7/ ）

这也将取代pa在标签内

 < span class =something> 
  

打破了代码。我不知道如何处理这个。我一直在检查各种类似的问题，并且我已经理解，通常我不应该使用正则表达式来解析html。但我不确定是否有任何快速的方法可以顺畅地解析html字符串，改变每个节点的文本，并用修改后的文本重建字符串？

<当然，我想我可以使用$ .parseHTML（），遍历每个节点，并以某种方式重写字符串，但是这在我看来太复杂并且容易出错。
有没有一种巧妙的方式来解析html字符串，告诉只在html标签之外做这个？

请注意，标签的内容本身必须处理。所以，在我上面的例子中，replace（）应该也作用于被替换为pa，但仅在html标签之外的部分。

正则表达式足以处理这个问题，或者（更好的是，我想）优雅地处理html字符串中的文本部分？ 解决方案

你的代码应该是这样的：

  var searchWord ='pa'; 
 var originalString ='要替换的< span class =something>的模式是pa，但只能在html标记< / span>之外; 
 
 var regEx = new RegExp（（+ searchWord +）（？！（[^ <+）？>），gi）; 
 
 var output = originalString.replace（regEx，< strong> $ 1< / strong>）; 
 
 alert（输出）; 
  

来源： http://pureform.wordpress.com/2008/01/04/matching-a-word-characters-outside -of-html-tags /

I have an autocomplete form and when showing the results matching the user's search string, I want to highlight the search string itself. I plan to do this by wrapping any occurrence of the search string within a tag such as , or a with a given class. Now, the problem is that when using regEx I have problems if the pattern occurs within a html tag. For instance

var searchPattern = 'pa';
var originalString = 'The pattern to <span class="something">be replaced is pa but only outside the html tag</span>';

var regEx = new RegExp(searchPattern, "gi")

var output = originalString.replace(regEx, "<strong>" + searchPattern + "</strong>");

alert(output);

(Demo: http://jsfiddle.net/cumufLm3/7/ )

This is going to replace also the occurrence of "pa" within the tag

 <span class="something">

breaking the code. I'm not sure how to deal with this. I've been checking various similar questions, and I've understood that in general I shouldn't use regular expressions to parse html. But I'm not sure if there is any quick way to parse smoothly the html string, alter the text of each node, and "rebuild" the string with the text altered?

Of course I suppose I could use $.parseHTML(), iterate over each node, and somehow rewrite the string, but this seems to me to be too complex and prone to errors. Is there a smart way to parse the html string somehow to tell "do this only outside of html tags"?

Please notice that the content of the tag itself must be handled. So, in my example above, the replace() should act also on the part "be replaced is pa but only outside the html tag".

Any idea of either a regular expression solid enough to deal with this, or (better, I suppose) to elegantly handle the text parts within the html string?

解决方案

Your code should look like this:

var searchWord = 'pa';
var originalString = 'The pattern to <span class="something">be replaced is pa but only outside the html tag</span>';

var regEx = new RegExp("(" + searchWord + ")(?!([^<]+)?>)", "gi");

var output = originalString.replace(regEx, "<strong>$1</strong>");

alert(output);

Source: http://pureform.wordpress.com/2008/01/04/matching-a-word-characters-outside-of-html-tags/

这篇关于Javascript：替换（）所有，但只有外部的HTML标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！