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

这是一个允许只用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>

Answer 2

请注意the link Scott Kaye发布的内容。正则表达式不是解析或操纵HTML的好工具。

我创建了一个 Fiddle ，它展示了一种非常不同的方法。我的涉及一个非常小的DOM walker。您为它提供了一个节点，它从该节点开始遍历DOM，并使用它访问的各个节点回调您的函数。 DOM Walker的实现只是放在一起，我确信它非常需要改进，但它适用于这种情况。你会这样称呼它：

var dw = new DomWalker();
dw.on('text', function(node) {
    node.nodeValue = node.nodeValue.replace(/red|td/ig, 'blue');
});
dw.walk(document.getElementById('myRow'));

请注意，虽然我仍然在这里使用正则表达式，但我只是在纯文本字符串上这样做。

如果没有别的，它应该给你一个替代尝试。

Answer 3

这是一个黑客攻击，但它确实有效。它需要几次替换。

第1步：在有标记或目标字（td或红色）的任何地方为文字添加标记。只有标签放回更换;目标词被省略，仅由标记本身代替。

搜索：(<[^>]+>)|(\btd\b|\bred\b)

替换：$1@MARKER@

临时结果：

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

第2步：从标记

中删除（来自结果字符串）标记

搜索：(<[^>]+>)@MARKER@

替换：$1

临时结果：

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

第3步：用“蓝色”替换（从结果字符串中）任何剩余的标记

搜索：@MARKER@

替换：blue

如何替换不是html标签的特定子串

3 个答案: