在前端开发中，我们经常会遇到需要批量处理页面文本的场景，比如将页面所有可见文本替换为星号用于脱敏，或者替换为固定占位符用于页面测试。这个需求的核心要求是只替换文本内容，不破坏原有的HTML结构和样式，下面我们就来实现这个功能。
实现思路
要实现文本替换且保留结构和样式，我们不能直接用字符串替换整个HTML内容，那样会破坏所有标签结构。正确的思路是通过DOM树的遍历，区分文本节点和元素节点：
- 如果是元素节点，继续递归遍历它的子节点
- 如果是文本节点，将文本内容替换为目标单一字符，字符长度保持和原文本长度一致
- 跳过<script>、<style>等不需要处理内容的标签，避免影响功能代码和样式定义
核心代码实现
我们使用原生JavaScript实现，不需要依赖任何第三方库，代码如下：
/**
* 批量替换页面文本为单一字符，保留结构和样式
* @param {string} targetChar 要替换成的单一字符，比如 '*'
* @param {HTMLElement} root 遍历的根节点，默认是body
*/
function replaceTextToSingleChar(targetChar, root = document.body) {
// 不需要处理内容的标签列表
const skipTags = ['SCRIPT', 'STYLE', 'TEXTAREA', 'INPUT', 'SELECT', 'OPTION'];
/**
* 递归遍历节点
* @param {Node} node 当前遍历的节点
*/
function traverseNode(node) {
// 如果是元素节点
if (node.nodeType === Node.ELEMENT_NODE) {
// 跳过不需要处理的标签
if (skipTags.includes(node.tagName)) {
return;
}
// 遍历所有子节点
const childNodes = node.childNodes;
for (let i = 0; i < childNodes.length; i++) {
traverseNode(childNodes[i]);
}
}
// 如果是文本节点
else if (node.nodeType === Node.TEXT_NODE) {
const originalText = node.textContent.trim();
// 如果文本不为空，替换为等长的目标字符
if (originalText.length > 0) {
node.textContent = targetChar.repeat(originalText.length);
}
}
}
// 从根节点开始遍历
traverseNode(root);
}
// 调用示例：将所有文本替换为星号
// replaceTextToSingleChar('*');
代码说明
上面的代码主要包含两个部分：
节点遍历逻辑
通过nodeType属性判断节点类型，Node.ELEMENT_NODE对应元素节点，Node.TEXT_NODE对应文本节点。对于元素节点，我们递归处理它的所有子节点，这样就能遍历到页面里所有的文本内容。
文本替换逻辑
对于文本节点，我们先获取原始文本的长度，然后用repeat方法生成等长的目标字符字符串，替换原来的文本内容。这样替换后的文本长度和原来一致，不会破坏页面的布局结构，原有的CSS样式也会正常生效。
跳过特殊标签
我们定义了skipTags数组，里面的标签不会被处理：
- <script>和<style>：避免替换代码和样式内容导致页面报错
- <textarea>、<input>等表单元素：这些元素的内容通常是用户输入的，或者有特殊用途，一般不参与批量替换
使用示例
如果我们需要将当前页面的所有文本替换为星号，只需要在控制台或者页面脚本里调用：
// 页面加载完成后执行替换
window.addEventListener('DOMContentLoaded', () => {
replaceTextToSingleChar('*');
});
如果需要替换指定容器里的内容，而不是整个页面，可以传入对应的容器元素：
// 只替换id为content的容器里的内容
const container = document.getElementById('content');
if (container) {
replaceTextToSingleChar('#', container);
}
注意事项
- 替换后的文本长度保持和原文本一致，所以不会影响原有布局，但是如果原文本包含换行符，替换后换行符会丢失，因为文本节点的换行会被处理成空白字符，trim之后会被忽略
- 如果页面有动态加载的内容，需要在内容加载完成后再调用替换函数，否则动态内容不会被处理
- 目标字符建议是单个字符，如果是多个字符，等长替换的逻辑需要调整，比如按照字符数替换而不是文本长度
这个方法只操作DOM的文本节点，不会修改元素的class、style等属性，所以原有的页面样式和结构都会完全保留，非常适合需要批量替换文本又不想破坏页面的场景。
HTMLJavaScriptDOM操作文本替换修改时间：2026-07-10 01:12:22