快速将html格式的文本字符串,解析为自定义格式的字符,为了解析改字符串,尝试过用正则,生成虚拟dom等方法,用正则解析出来感觉不是自己想要的,生成虚拟dom有感觉太重了。后面从想到用这方法,算是圆满解决了吧
二次开发文本编辑器后拿到编辑器的内容,想将内容解析成与后端沟通下来的格式:
代码如下
1.数据
let data=`<p>数据结构
<button id="st20fc50dd247e4bd7868a1fd744e1580b" class="insertBtn" contenteditable="false" data-default=" 啊手动阀阿斯顿" data-name="用户名" data-prop="username">
<em>用户名</em> <strong class="settingIcon">设置</strong>
</button>
啊打发士大夫地方
<button id="st3461399b84e74c5b870d9ef23abc0a75" class="insertBtn" contenteditable="false" data-default="https://presuichuanh5.presyy.nbseo.cn/index?id=1580447285419646978&role=works&pattern=" data-name="短链接" data-prop="shortUrl"> <em>短链接 </em>
</button>
</p>`
2.解析数据
// 解析富文本编辑器内容
export function formatHtml(data) {
let dom = document.createElement('div')
let newData = {
showData: '', //用于预览的展示的数据
releayData: '' //传给后端的数据
}
dom.innerHTML = data
let p = dom.querySelectorAll('p')
for (let i = 0; i < p.length; i++) {
let f = formatP(p[i])
newData.releayData += f.ret
newData.showData += f.showRet
}
console.log('格式化后的数据:', newData)
return newData
}
export function formatP(p) {
let ret = '',
showRet = ''
for (let i = 0; i < p.childNodes.length; i++) {
let node = p.childNodes[i]
if (node.nodeName == 'BUTTON') {
//如果是插入的button
let key = node.dataset.prop
let val = node.dataset.default
let name = node.dataset.name
showRet += `<span>{${name}}</span>`
ret += `{${key}:'${val}'}`
} else if (node.nodeName == '#text') {
//如果是文本内容
ret += node.nodeValue
showRet += node.nodeValue
} else {
ret += node.nodeValue
showRet += node.nodeValue
}
}
return { ret: ret, showRet: showRet }
}
3.然后数据就会被解析为这两种格式
1.数据1:文本{属性名:属性值}文本{属性名:属性值}文本
2.文本<span>中文属性</span>文本