javascript - 获取不在标签中的匹配字符串

Question

我想hello world从这样的html字符串中获取字符串：

Hello world! hello world! Hello world! <a href="#">hello world</a><p>hello world</p><p><a href="#">hello world</a></p>

但我不想进入hello world标签a。例子：

<a href="#">hello world</a>

和

<p><a href="#">hello world</a></p>

不会匹配。

我的代码：

var replacepattern = new RegExp('hello world(?![^<]*>)',"ig");

返回hello world字符串中的所有 s。有任何想法吗？

编辑：

我用(?![^<]*>)的情况下：<p title="hello world"> hello world</p>。所以我没有得到hello world标签属性中的 s

编辑2：

我想返回字符串：

'<a href="#hello world">Hello world</a>! <a href="#hello world">Hello world</a>! <a href="#hello world">Hello world</a>! <a href="#">Hello world</a><p><a href="#hello world">Hello world</a></p><p><a href="#">Hello world</a></p>'

Answer 1

假设您在字符串中获得了该 HTML：

var str = 'Hello world! hello world! Hello world! <a href="#">hello world</a><p>hello world</p><p><a href="#">hello world</a></p>';

我们不会想出复杂的 REGEX 模式来匹配它，而是将 HTML 放在一个 HTML 容器中，并使用内置在每个带有 JavaScript 的浏览器中的强大 DOM api 来处理它。

var el = document.createElement("div");
el.innerHTML = str;

现在，让a我们从元素中获取所有标签，然后自己删除它们

var aTags = el.getElementsByTagName("a");
while(aTags.length > 0){ // while the element still has a tags 
    aTags[0].parentNode.removeChild(aTags[0]); //remove
}

现在，我们可以取回 HTML 并获取正确的文本内容

el.innerHTML; 

现在是：

"Hello world! hello world! Hello world! <p>hello world</p><p></p>"

现在，如果我们只想要没有标签的文本，我们也可以这样做。

el.textContent;

将评估为：

"Hello world! hello world! Hello world! hello world"

Answer 2

描述

该表达式将：

• 允许您仅替换hello world锚标记之外的子字符串
• 避免困难的边缘情况，这使得 HTML 中的模式匹配变得困难
• 不使用原子组，因为它们在 Javascript 中是不允许的

正则表达式

((?:<a(?=\s|>)(?:[^>=|&)]|='(?:[^']|\\')*'|="(?:[^"]|\\")*"|=[^'"][^\s>]*)*>.*?<\/a>|(?!hello\sworld|<a\s).)*)(hello\sworld\s\d+)((?:<a(?=\s|>)(?:[^>=|&)]|='(?:[^']|\\')*'|="(?:[^"]|\\")*"|=[^'"][^\s>]*)*>.*?<\/a>|(?!hello\sworld|<a\s).)*)

Full Explaination

理论：

• ((?:<a(?=\s|>)(?:[^>=|&)]|='(?:[^']|\\')*'|="(?:[^"]|\\")*"|=[^'"][^\s>]*)*>.*?<\/a>|(?!hello\sworld|<a\s).)*) 捕获锚标记，以及锚标记之外的任何非hello world. 这是第 1 组
• (hello\sworld\s\d+)捕捉你好世界。这是第 2 组。由于我在示例文本中添加了数字以帮助显示正在捕获的子字符串，因此我还在\s\d+本节中添加了 。是的，可以说这超出了您的原始范围。^_:)
• ((?:<a(?=\s|>)(?:[^>=|&)]|='(?:[^']|\\')*'|="(?:[^"]|\\")*"|=[^'"][^\s>]*)*>.*?<\/a>|(?!hello\sworld|<a\s).)*) 捕获锚标记，以及锚标记之外的任何非hello world. 这是第 3 组。它与第 1 组的模式相同，但它是必需的，否则您可能会在字符串中的最后一个匹配项中遇到奇怪的结果。

用。。。来代替

在下面的示例中，我使用此替换来帮助更清楚地了解正在发生的事情：

$1_______$3

您可以使用它来hello world用锚标记替换您的字符串：

$1<a href="$2">$2</a>$3

例子

示例文本

请注意带有 onmouseover 属性的锚标记中的困难边缘情况。我还在每个hello worlds 中添加了数字，以便我们人类更容易阅读。

<a href="#">hello world 00</a>Hello world 1! hello world 2! Hello world 3! <a onmouseover=' a=1; href="www.NotYourURL.com" ; if (3 <a && href="www.NotYourURL.com" && id="revSAR" && 6 > 3) { funRotate(href) ; } ; ' href="#">hello world 04</a><p>hello world 5</p><p><a href="#">hello world 06</a></p> <a href="#">hello world 07</a>fdafdsa

示例 Javascript

<script type="text/javascript">
  var re = /((?:<a(?=\s|>)(?:[^>=|&)]|='(?:[^']|\\')*'|="(?:[^"]|\\")*"|=[^'"][^\s>]*)*>.*?<\/a>|(?!hello\sworld|<a\s).)*)(hello\sworld\s\d+)((?:<a(?=\s|>)(?:[^>=|&)]|='(?:[^']|\\')*'|="(?:[^"]|\\")*"|=[^'"][^\s>]*)*>.*?<\/a>|(?!hello\sworld|<a\s).)*)/;
  var sourcestring = "source string to match with pattern";
  var replacementpattern = "$1<a href="$2">$2</a>$3";
  var result = sourcestring.replace(re, replacementpattern);
  alert("result = " + result);
</script>

替换后的字符串

这只是为了显示正在发生的事情，使用第一个“替换为”

<a href="#">hello world 00</a>_______! _______! _______! <a href="#">hello world 04</a><p>_______</p><p><a href="#">hello world 06</a></p> <a href="#">hello world 07</a>fdafdsa

这是使用第二个“替换为”来展示它实际上是如何工作的

<a href="#">hello world 00</a><a href="Hello world 1">Hello world 1</a>! <a href="hello world 2">hello world 2</a>! <a href="Hello world 3">Hello world 3</a>! <a onmouseover=' a=1; href="www.NotYourURL.com" ; if (3 <a && href="www.NotYourURL.com" && id="revSAR" && 6 > 3) { funRotate(href) ; } ; ' href="#">hello world 04</a><p><a href="hello world 5">hello world 5</a></p><p><a href="#">hello world 06</a></p> <a href="#">hello world 07</a>fdafdsa

Answer 3

现在大多数浏览器都支持负前瞻，你可以试试这个：

(?![^>]*<\/[a-zA-Z]>)(Hello world)

演示：https ://regex101.com/r/rDPp0t/2/

Answer 4

我认为这会起作用：

var str = 'Hello > world <! Hello > world <! Hello > world <! <a href="#">Hello > world <</a><p>Hello > world <</p><p><a href="#">Hello > world <</a></p>';
var textToReplace = 'Hello > world <'
var re = new RegExp('(?!(^<*(href=)*(>)))' + textToReplace + '(?!(</a>))',"ig");
var result = str.replace(re, '@');
console.log(result);

结果是

@! @! @! <a href="#">Hello > world <</a><p>@</p><p><a href="#">Hello > world <</a></p> 

那是你想要达到的吗？

JsFiddle -> http://jsfiddle.net/Che3v/1/