一、问题原因
做了一个富文本的功能，需求要支持替换富文本中的内容，类似与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字符串
}
三、查找替换插件仓库
https://gitee.com/a224747_cheng/find-replacement-function/tree/master
