一、问题原因
做了一个富文本的功能,需求要支持替换富文本中的内容,类似与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字符串
}