一、问题原因
做了一个富文本的功能，需求要支持替换富文本中的内容，类似与word的查找替换，当做到替换的时候，发现获取到富文本的内容是带有标签的内容，替换与标签一样的英文的时候会导致标签被替换，导致页面混乱。（例：当替换字母类似于p，富文本中有< p ></ p >标签中的p也会被替换）
二、解决方法
/**
* html:富文本内容
* oldText：要被替换的内容
* newText： 将替换为的内容
* disSize：是否区分大小写
*/
const replaceText = (html, oldText, newText,disSize) => {
// 使用DOMParser将HTML字符串解析为DOM文档
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
// 创建一个DocumentFragment去存储修改后的DOM节点
const fragment = doc.createDocumentFragment();
// 递归函数，用于遍历所有节点并替换相关文本
function traverseAndReplace(node) {
if (node.nodeType === Node.TEXT_NODE) {
// 文本节点，检查并替换文本
const replacedText = disSize? node.nodeValue.replace(new RegExp(oldText, 'gi'), newText): node.nodeValue.replace(new RegExp(oldText, 'g'), newText);
if (replacedText !== node.nodeValue) {
// 如果文本被替换，则替换整个节点（因为nodeValue为只读的）
const newNode = doc.createTextNode(replacedText);
node.parentNode.replaceChild(newNode, node);
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
// 元素节点，递归遍历所以子节点
node.childNodes.forEach(child => traverseAndReplace(child));
}
}
// 遍历并替换文档中的文本
traverseAndReplace(doc.body);
fragment.appendChild(doc.body);
return documentFragmentToHTMLString(fragment).replace(/<body>/g, "").replace(/<\/body>/g, ""); // 返回修改后的HTML字符串
}
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
