javascript - 如何替换不是html标签的特定子字符串

Question

我想将下面内容中的“red”和“td”替换为“blue”，但我不想要最后一个<td>的颜色属性和所有<td>标签被弄乱。

<tr>
    <td>Code name td A001</td>
    <td>Madam Red</td>
    <td><font color="red">do your job</font></td>
</tr>

这就是我想要的:

<tr>
    <td>Code name blue A001</td>
    <td>Madam blue</td>
    <td><font color="red">do your job</font></td>
</tr>

但是当我使用/<td>.*(red|td).*<\/td>/gi时我得到了这个结果替换内容。

<tr>
    <blue>Code name blue A001</blue>
    <blue>Madam blue</blue>
    <blue><font color="blue">do your job</font></blue>
</tr>

有没有正则表达式可以解决这个问题？

谢谢。

Answer 1

这里有一个技巧，只需一次即可替换:

((?!<\/td)[^<]|^)(?:td|red)(?![^<]*>)

替换为

$1blue

参见demo .

示例代码:

var re = /((?!<\/td)[^<]|^)(?:td|red)(?![^<]*>)/ig; 
var str = '<tr>\n    <td>Code /td name td A001</td>\n    <td>Madam Red</td>\n    <td><font color="red">do your job</font></td>\n</tr>';
var subst = '$1blue'; 
var result = str.replace(re, subst);

结果:

<tr>
    <td>Code /blue name blue A001</td>
    <td>Madam blue</td>
    <td><font color="red">do your job</font></td>
</tr>