有没有办法替换放置在HTML正文中的table元素内的普通文本?
喜欢用“ hi”代替“ hello”吗?
请仅使用不带jQuery的JavaScript。
有没有办法替换放置在HTML正文中的table元素内的普通文本?
喜欢用“ hi”代替“ hello”吗?
请仅使用不带jQuery的JavaScript。
hello, this is a text randomTexthello应该是hi, this is a text randomTexthello。但是,这里所有其他答案都代替了字符而不是单词。
Answers:
要用另一个字符串替换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');
<script type="text/javascript"> window.onload = clear(); function clear() { document.body.innerHTML = document.body.replace('ü', 'n'); } </script>
window.onload = clear;不带括号“()”。在编写时,clear()您实际上执行了该函数,但是您只想将该函数分配给onload-handler
下面的功能对我来说很完美:
// 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);
您也可以像这样直接进行替换:
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);
}
我最终使用了此功能来安全地替换没有副作用的文本(到目前为止):
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);
}
}
}
这是针对16kB findAndReplaceDOMText太重的情况。
我试图替换一个非常大的字符串,并且由于某些原因正则表达式引发了一些错误/异常。
因此,我发现了这种替代正则表达式的方法,它的运行速度也非常快。至少它对我来说足够快:
var search = "search string";
var replacement = "replacement string";
document.body.innerHTML = document.body.innerHTML.split(search).join(replacement)
尝试将上述建议的解决方案应用到相当大的文档中,替换可能存在于innerHTML甚至innerText中的相当短的字符串,并且您的html设计充其量会被破坏
因此,我首先通过HTML DOM节点仅拾取文本节点元素,如下所示
function textNodesUnder(node){
var all = [];
for (node=node.firstChild;node;node=node.nextSibling){
if (node.nodeType==3) all.push(node);
else all = all.concat(textNodesUnder(node));
}
return all;
}
textNodes=textNodesUnder(document.body)
for (i in textNodes) { textNodes[i].nodeValue = textNodes[i].nodeValue.replace(/hello/g, 'hi');
`然后我周期性地对所有这些替换应用了替换
当我不断收到此错误时,想在时髦的答案中添加一个示例:
Uncaught TypeError: element.childNodes is not iterable
像这样使用:
replaceInText(document.body,"search term","replacement");
它不适用于jQuery选择器。
有时更改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");