1、先封装一个去掉html字符串之间的所有空格符方法
export const removeHtmlSpace = (htmlVal = '') => {
if (htmlVal) {
return htmlVal.replace(/[\r\n]/g, "")
} else return ''
}
1、封装html字符串转DOM设置字体/颜色等处理
export const setHtmlString = (htmlString = '') => {
const parser = new DOMParser()
const dom = parser.parseFromString(htmlString, 'text/html')
//获取包括html/head/body在内的所有元素
let allNode = dom.getElementsByTagName('*')
//忽略标签节点的nodeName
const ignoreNodes = ['HTML', 'HEAD', 'BODY']
for (const todo of allNode) {
if (!ignoreNodes.includes(todo.nodeName)) {
//如果标签没有fontSize,则默认设置12px
if (!todo.style.fontSize) {
todo.style.fontSize = '12px'
}
//如果标签没有fontFamily,则默认设置 ===> 微软雅黑
if (!todo.style.fontFamily) {
todo.style.fontFamily = "微软雅黑"
}
}
}
//导出处理后的DOM
return removeHtmlSpace(dom.body.innerHTML)
}
最后使用只需要引入setHtmlString 方法