替换字符串,使其不与子元素冲突

时间:2016-03-04 18:25:22

标签: javascript html regex string replace

假设我有一些标记

<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>包围的匹配文本的正则表达式?

1 个答案:

答案 0 :(得分: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)