html渲染的文字样式大小不统一解决方案

React Hooks 封装可粘贴图片的输入框组件（wangeditor）_react 支持图片拖拽的输入框-CSDN博客

这篇文章中的wangediter可粘贴图片的输入框，输入的文字和粘贴的文字在dangerouslySetInnerHTML渲染后出现了字体不统一的情况

在html中右键检查可以看到粘贴后的文字没有标签为文本节点#text，而在输入框中输入的则在p标签中自然字体字号样式就不统一了

那么只要让#text也被p标签或者span标签包着就可以自定义样式啦

我这里用的是找到某个类名下所有的文本节点#text，然后把文本节点替换为其父元素中的span元素，下面是方法：（含注释噢~适合中国宝宝体质阅读的代码片段！）

 function wrapTextNodesInSpanExcept(selector,excludeClass,spanClass = "wrapped-text") {const questionDetails = document.querySelectorAll(selector);function wrapTextNode(node, excludeAncestor) {if (node.nodeType === Node.TEXT_NODE &&/\S/.test(node.nodeValue) &&!excludeAncestor) {const span = document.createElement("span");span.className = spanClass; // 设置span的类名// 将文本节点的文本内容设置到span中span.textContent = node.nodeValue;// 替换文本节点为其父元素中的span元素node.parentNode.replaceChild(span, node);} else if (node.nodeType === Node.ELEMENT_NODE) {// 检查当前元素或其祖先是否有excludeClasslet exclude = false;for (let el = node;el && el !== document.body;el = el.parentElement) {if (el.classList.contains(excludeClass)) {exclude = true;break;}}// 递归处理元素节点的子节点Array.from(node.childNodes).forEach((childNode) => {wrapTextNode(childNode, exclude);});}}questionDetails.forEach((questionDetail) => {// 从question-detail元素开始递归，并传入false作为excludeAncestor的初始值Array.from(questionDetail.childNodes).forEach((childNode) => {wrapTextNode(childNode, false);});});}// 调用函数，为question-detail下的除了question-file类下的所有文本节点添加span标签wrapTextNodesInSpanExcept(".question-detail", "question-file");

加了一点额外的小处理就是后面发现我需要替换的是question-detail下的除了question-file类下的所有文本节点，如果不需要传空就ok，然后在样式中给这个类名或者span标签写样式就OK了！

结果展示：无论你粘贴输入插入怎么样输入的文字在html页面渲染的文字都会被统一啦