如何使用 javascript 和 DOM 正确搜索和替换 HTML 文档中的字符串？答案

【问题标题】：How do i correctly search and replace for strings in a HTML-Document with javascript and DOM?如何使用 javascript 和 DOM 正确搜索和替换 HTML 文档中的字符串？
【发布时间】：2014-03-31 06:16:42
【问题描述】：

假设我在 HTML 文件中有一行如下所示：

this is <br>a <b>test</b>

我想通过使用 javascript 找到这个字符串（完整的行），例如 put:

<font color="..."></font> around it.

围绕它。

其实我在遍历 DOM 结构中的所有文本节点，但是文本在这些节点中被分割，所以我认为这是错误的方式。

如果我遍历元素节点，我可以完美地使用 textContent 进行搜索，但不能用于替换/更改，因为 HTML 标记完全丢失。

那么做这样的事情的正确方法是什么？

【问题讨论】：

我怀疑你想在 2014 年的某件事上加上一个<font> 标签。
您应该避免将样式属性放在 HTML 中，因为它们已被弃用，取而代之的是外部 CSS。应该为内容保留 HTML 标记。
好吧，我的问题不是关于我想要环绕的标签，而是更多关于如何在 DOM 结构中解决这个问题。是一个例子，它可能是
、 或其他内容。
@TylerH 有时您需要内联 CSS，Mathletics 正在谈论不使用已弃用的 font 标签..
查看此页面johannburkard.de/blog/programming/javascript/…

【解决方案1】：

我认为你可以通过在父节点上做一些 RegExp 来实现你的目标。

如果你不熟悉 RegExp，这里有一些很好的参考：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

希望对你有帮助。

编辑：

var text = "<ul><li>1</li><li>2</li><li>3</li></ul><br>bla bla this is <br>a <b>test</b> <br>";
var result = text.match(/(this.*<\/b>)/i);
console.log(result);

在行动：

http://jsfiddle.net/G2e5k/

【讨论】：

我考虑过使用正则表达式，但我不知道 HTML 中有哪些标签。我想做的是一个像firefox一样突出显示的搜索功能，只是为了学习目的。
我认为 RegExp 在这里真的可以帮到你。看看我对答案所做的更改。
如果您有任何处理程序，您不想运行正则表达式并更新 HTML。修改 DOM/ 更安全
@Renato Galvão：但是我如何突出显示像 HTML 中的“t
e
s
t”这样的“test”这样的词？