篡改网页内容：document.body.innerHTML = document.body.innerHTML.replace(/工作/g, '摸鱼');
JavaScript 提供了强大的 DOM 操作能力，其中 document.body.innerHTML 是一个常用的属性，用于获取或设置整个文档的 HTML 内容。通过修改这个属性，可以实现动态更新页面内容的效果。例如，将页面中所有的“工作”替换为“摸鱼”，只需要一行简单的代码：
document.body.innerHTML = document.body.innerHTML.replace(/工作/g, '摸鱼');
理解 document.body.innerHTML
document.body.innerHTML 是 DOM 中的一个属性，它返回或设置 <body> 元素内的 HTML 内容。它是一个字符串，包含所有子元素的 HTML 标记。通过修改这个字符串，可以动态改变页面的显示内容。
// 获取当前 body 的 HTML 内容
const bodyContent = document.body.innerHTML;
console.log(bodyContent); // 输出整个 body 的 HTML 结构
// 修改 body 的 HTML 内容
document.body.innerHTML = '<h1>Hello, World!</h1>';
需要注意的是，直接修改 innerHTML 会完全替换原有的 DOM 结构，可能导致事件监听器丢失或性能问题。
使用 replace 方法替换文本
JavaScript 的字符串方法 replace 可以用于替换文本。它接受一个正则表达式或字符串作为搜索条件，并返回替换后的新字符串。全局替换需要使用正则表达式的 g 标志。
const originalText = "今天要努力工作，努力工作才能成功。";
const modifiedText = originalText.replace(/工作/g, '摸鱼');
console.log(modifiedText); // 输出："今天要努力摸鱼，努力摸鱼才能成功。"
实际应用：批量替换页面文本
假设页面上有以下内容：
<p>今天的工作是写代码。</p>
<p>下午的工作是开会。</p>
<button id="replaceBtn">替换文本</button>
通过点击按钮，将所有“工作”替换为“摸鱼”：
document.getElementById('replaceBtn').addEventListener('click', () => {
document.body.innerHTML = document.body.innerHTML.replace(/工作/g, '摸鱼');
});
点击按钮后，页面内容变为：
<p>今天的摸鱼是写代码。</p>
<p>下午的摸鱼是开会。</p>
<button id="replaceBtn">替换文本</button>
注意事项与潜在问题
- 事件监听器丢失：直接修改
innerHTML会销毁原有 DOM 并重新创建，导致绑定的事件监听器失效。如果需要保留事件，可以考虑更精细的 DOM 操作，比如遍历文本节点并修改内容。
function replaceTextInNode(node, search, replacement) {
if (node.nodeType === Node.TEXT_NODE) {
node.textContent = node.textContent.replace(search, replacement);
} else {
node.childNodes.forEach(child => replaceTextInNode(child, search, replacement));
}
}
replaceTextInNode(document.body, /工作/g, '摸鱼');
-
性能问题：对于大型页面，频繁修改
innerHTML可能导致性能下降。建议仅在必要时使用。 -
安全性问题：如果替换的内容来自用户输入，需警惕 XSS 攻击。确保对输入进行转义或过滤。
扩展：替换特定元素的文本
如果只想替换特定元素内的文本，而不是整个页面，可以通过 querySelector 或 getElementById 定位目标元素：
<div id="content">
<p>今天的工作是写代码。</p>
</div>
<button id="replaceBtn">替换文本</button>
document.getElementById('replaceBtn').addEventListener('click', () => {
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = contentDiv.innerHTML.replace(/工作/g, '摸鱼');
});
结合正则表达式的高级替换
正则表达式可以实现更复杂的替换逻辑。例如，仅替换特定上下文中的“工作”：
// 仅替换“努力”后面的“工作”
document.body.innerHTML = document.body.innerHTML.replace(/努力工作/g, '努力摸鱼');
或者使用回调函数动态替换：
document.body.innerHTML = document.body.innerHTML.replace(/工作/g, (match) => {
return Math.random() > 0.5 ? '摸鱼' : '划水';
});
与其他 DOM 操作方法的对比
除了 innerHTML，还可以使用 textContent 或 innerText 修改文本内容。它们的区别在于：
innerHTML：解析 HTML 标签。textContent：不解析 HTML 标签，直接显示纯文本。innerText：考虑 CSS 样式，忽略隐藏元素。
// 使用 textContent 替换文本（不解析 HTML）
const element = document.querySelector('p');
element.textContent = element.textContent.replace(/工作/g, '摸鱼');
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
