javascript - 替换字符串，使其不与子元素冲突

Question

假设我有一些标记

<p>
hello there <a>say hello</a>
</p>

我想替换不在 <a> 范围内的字符串的每个实例。标记为 <a>标签。例如，我在本例中尝试替换的单词是 hello与 <a>hello</a>如果我调用 string.replace("hello","<a>hello</a>")它将取代两者hellos留给我
<p>
<a>hello</a> there <a>say <a>hello</a></a>
</p>

当我真正想要的是
<p>
<a>hello</a> there <a>say hello</a>
</p>

有没有办法将元素的实际文本与其子元素分开？或者更好。是否可以编写一个正则表达式来忽略由一组 <a> </a> 包围的匹配文本？

Answer 1

我不完全确定检测 <a> 中未包含的 hello 出现的方法。标签，但以下内容将执行您想要的操作。

基本概念是将内容分成两个数组:一个包含纯文本，另一个包含链接。 map函数处理纯文本上的替换方法，然后循环将两个数组重新拼接成输出字符串。

"use strict";
var test = "hello there <a>say hello</a>"

function addLinksToHello(str) {
  var linkrgx = /<a.*?>.+?<\/a>/gi,
    plaintext = str.split(linkrgx),
    links = str.match(linkrgx)

  console.log(plaintext)
  console.log(links)

  plaintext = plaintext.map(txt => txt.replace('hello', '<a>hello</a>'))

  console.log(plaintext)

  //rebuild string
  var len = -1,
    merged = []
  while (++len < plaintext.length) {
    merged.push(plaintext[len])
    if (links[len]) merged.push(links[len])
  }

  console.log(merged)

  return merged.join("")
}

var addedlink = addLinksToHello(test)

console.log(addedlink)