替换字符串，它不与子元素冲突

Question

想我这的hve一些标记

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

而且我想更换一个字符串，它由一个不是<a>标签内的每一个实例<a>标签。举例说，我想在这个例子中替换的单词是hello与<a>hello</a>如果我叫string.replace("hello","<a>hello</a>")它将与
<p> <a>hello</a> there <a>say <a>hello</a></a> </p>

更换都hellos离开我，当我真正想要的是
<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)