替换正文中的单词
Replace words in the body text
是否有一种方法来替换放置在HTML主体内的表元素中的正常文本?
比如用"hi"代替"hello"?
请只使用JavaScript,不使用jQuery。
用innerHTML:
中的replace方法替换HTML中的字符串document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');
请注意,这将替换整个主体的hello
的第一个实例,包括HTML代码中的任何实例(例如类名等),所以要谨慎使用-为了更好的结果,尝试通过使用document来限制您的替换范围。getElementById或类似的
要替换目标字符串的所有实例,使用一个带有g
全局标志的简单正则表达式:
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);
}
}
}
这是在16kB的findAndReplaceDOMText
有点太重的情况下
下面的函数对我来说是完美的:
// 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);
}
有时更改document.body.innerHTML
会破坏页面上的一些JS脚本。这是版本,只改变text
元素的内容:
function replaceRecursively(element, from, to) {
if (element.childNodes.length) {
element.childNodes.forEach(child => replaceRecursively(child, from, to));
} else {
const cont = element.textContent;
if (cont) element.textContent = cont.replace(from, to);
}
};
replaceRecursively(document.body, new RegExp("hello", "g"), "hi");
我也遇到了同样的问题。我在innerHTML上使用replace写了自己的函数,但是它会搞砸锚链接之类的。
为了使它正常工作,我使用了一个库来完成。
这个库有一个很棒的API。在包含脚本之后,我这样调用它:
findAndReplaceDOMText(document.body, {
find: 'texttofind',
replace: 'texttoreplace'
}
);
我试图替换一个非常大的字符串,由于某种原因正则表达式抛出一些错误/异常。
所以我发现这个替代正则表达式也运行得很快。至少对我来说够快了:
var search = "search string";
var replacement = "replacement string";
document.body.innerHTML = document.body.innerHTML.split(search).join(replacement)
src:如何替换JavaScript中字符串的所有出现?
虽然使用innerHTML.replace
可以工作并且非常快,但这会破坏DOM状态。
你可以复制这一点,设置"autofocus"
在输入字段,然后改变innerHTML
在主体,它会失去焦点。
破坏性较小的方法是:
// retrives all childNodes of body
var childNodes = document.body.childNodes;
// start replacing
replaceInNodes(childNodes, "search", "replace");
function replaceInNodes(nodes,search,replace) {
// iterate through all nodes
for (var i = 0; i < nodes.length; i++) {
var curNode = nodes[i];
// if the node has attributes, let us look at those
// i.e. we want to change "John" in the input placeholder to "Peter" - <input type="text" value="John">
if (curNode.attributes !== undefined) {
var curNodeAttributes = curNode.attributes;
for (var ii = 0; ii < curNodeAttributes.length; ii++) {
// replace attribute values
curNodeAttributes[ii].nodeValue = curNodeAttributes[ii].nodeValue.replace(search, replace);
}
}
// It is a "TEXT_NODE"
// i.E. <span>John</span>
if (curNode.nodeType === Node.TEXT_NODE) {
curNode.data = this.injectIntoString(curNode.data);
}
// It is a "ELEMENT_NODE", meaning we need to go deeper
if (curNode.nodeType === Node.ELEMENT_NODE) {
this.replaceInNodes(curNode.childNodes);
}
}
}
更多信息可以在这里找到:https://zgheb.com/i?v=blog& pl = 71 # 12.11.2020_ -_Unobstrusively_replace_text_with_JavaScript
注:我是上述链接的作者
使用javascript默认的字符串替换函数
var curInnerHTML = document.body.innerHTML;
curInnerHTML = curInnerHTML.replace("hello", "hi");
document.body.innerHTML = curInnerHTML;
我是Javascript
的新手,刚刚开始学习这些技能。请检查下面的方法是否对替换文本有用。
<script>
var txt=document.getElementById("demo").innerHTML;
var pos = txt.replace(/Hello/g, "hi")
document.getElementById("demo").innerHTML = pos;
</script>
尝试在相当大的文档中应用上述建议的解决方案,替换可能存在于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');
',随后我在循环
想给funky-future的答案添加一个例子,因为我一直得到这个错误:
Uncaught TypeError: element.childNodes is not iterable
的用法如下:
replaceInText(document.body,"search term","replacement");
- 当鼠标悬停在文本中的单词上时显示警报
- 匹配一个单词,其中候选人可以跨越顺序组(跨度)
- 如何使用jquery强制一个单词更改大小写等以保留品牌
- 拆分单词jquery
- 如何让程序检查所选单词中是否有按键
- 如何在悬停时流畅地更改单词
- EmberJS中支持单字母单词模型
- 字母计数:返回重复字母数最多的第一个单词
- javascript问题正文样式
- 如何在Javascript中从字符串中提取某些单词
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- 在javascript中查找单词
- 使用jQuery检查提交时添加到句子中的单词
- JQuery在单击正文时隐藏上下文菜单
- 如何在PHP中获取特定的字符串单词
- 停止较大单词的重叠
- 如何在没有单词的情况下从命令行运行Node.js程序'节点'
- 使用Javascript对邮件正文中的每个单词进行随机着色
- 替换文档正文中的所有单词不起作用
- 替换正文中的单词