有没有办法替换放置在 HTML 正文中的表格元素中的普通文本？
喜欢用“嗨”代替“你好”？
请只使用没有jQuery 的JavaScript。
替换正文中的单词
IT技术
javascript
html
2021-02-09 08:57:42
6个回答
要将 HTML 中的字符串替换为另一个字符串，请使用innerHTML上的replace方法：
document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');
请注意，这将替换hello整个正文中的第一个实例，包括 HTML 代码中的任何实例（例如类名等），因此请谨慎使用 - 为了获得更好的结果，请尝试通过使用以下代码来限制替换范围document.getElementById或类似的。
要替换目标字符串的所有实例，请使用带有global 标志的简单正则表达式：
document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');
我最终使用这个函数来安全地替换文本而没有副作用（到目前为止）：
function replaceInText(element, pattern, replacement) {
for (let node of element.childNodes) {
switch (node.nodeType) {
case Node.ELEMENT_NODE:
replaceInText(node, pattern, replacement);
break;
case Node.TEXT_NODE:
node.textContent = node.textContent.replace(pattern, replacement);
break;
case Node.DOCUMENT_NODE:
replaceInText(node, pattern, replacement);
}
}
}
它适用于 16kBfindAndReplaceDOMText有点太重的情况。
下面的功能非常适合我：
// Note this *is* JQuery, see below for JS solution instead
function replaceText(selector, text, newText, flags) {
var matcher = new RegExp(text, flags);
$(selector).each(function () {
var $this = $(this);
if (!$this.children().length)
$this.text($this.text().replace(matcher, newText));
});
}
这是一个使用示例：
function replaceAllText() {
replaceText('*', 'hello', 'hi', 'g');
}
$(document).ready(replaceAllText);
$('html').ajaxStop(replaceAllText);
您还可以使用 do 直接替换，如下所示：
document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');
但要小心，因为它也可能影响标签、css 和脚本。
编辑： 对于纯 JavaScript 解决方案，请改用此方法：
function replaceText(selector, text, newText, flags) {
var matcher = new RegExp(text, flags);
var elems = document.querySelectorAll(selector), i;
for (i = 0; i < elems.length; i++)
if (!elems[i].childNodes.length)
elems[i].innerHTML = elems[i].innerHTML.replace(matcher, newText);
}
我有同样的问题。我在innerHTML 上使用replace 编写了我自己的函数，但它会搞砸锚链接等。
为了使其正常工作，我使用了一个库来完成这项工作。
该库有一个很棒的 API。包含脚本后，我这样称呼它：
findAndReplaceDOMText(document.body, {
find: 'texttofind',
replace: 'texttoreplace'
}
);
有时更改document.body.innerHTML会破坏页面上的一些 JS 脚本。这是版本，仅更改text元素的内容：
function replace(element, from, to) {
if (element.childNodes.length) {
element.childNodes.forEach(child => replace(child, from, to));
} else {
const cont = element.textContent;
if (cont) element.textContent = cont.replace(from, to);
}
};
replace(document.body, new RegExp("hello", "g"), "hi");