将html字符串格式化成自己想要的格式

快速将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&amp;role=works&amp;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>文本