将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 = datalet p = dom.querySelectorAll('p')for (let i = 0; i < p.length; i++) {let f = formatP(p[i])newData.releayData += f.retnewData.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') {//如果是插入的buttonlet key = node.dataset.proplet val = node.dataset.defaultlet name = node.dataset.nameshowRet += `<span>{${name}}</span>`ret += `{${key}:'${val}'}`} else if (node.nodeName == '#text') {//如果是文本内容ret += node.nodeValueshowRet += node.nodeValue} else {ret += node.nodeValueshowRet += node.nodeValue}}return { ret: ret, showRet: showRet }
}

3.然后数据就会被解析为这两种格式

1.数据1：文本{属性名:属性值}文本{属性名:属性值}文本

2.文本<span>中文属性</span>文本

将html字符串格式化成自己想要的格式相关推荐

Python练习1-文档格式化成html
文档格式化成HTML 把文档格式化成了THML,并没有处理所有thml规则,只是处理了一部分,功能不重要,重要的是复习熟悉下Python对文档的处理细节.毕竟Python大多数给我的印象都是处理文档. ...
计算机二级日期格式,09年计算机二级辅导:指定格式的日期字符串转化成java.util.Date类型日期对象...
09年计算机二级辅导:指定格式的日期字符串转化成java.util.Date类型日期对象分类:计算机等级| 更新时间:2008-10-16| 来源:教育联展网将未指定格式的日期字符串转化成java ...
哪位有方法把 dd/mm/yyyy的字符串格式化成yyyy-mm-dd
哪位有方法把 dd/mm/yyyy的字符串格式化成yyyy-mm-dd [总监]Dawood(656317124) 10:00:42 啊,找到方法了. procedure TForm1.Butt ...
字符串格式化成时间格式_JAVA | 常用的日期/时间格式化方式
引言我们在开发过程中,在数据库中经常会看到beginTime.updateTime和endTime这些字段,这些可能是为了记录业务操作的某个时间.日期等信息.特此,总结一些在代码中常用的日期.时 ...
java 指定格式的date_指定格式的日期字符串转化成java.util.Date类型日期对象
将未指定格式的日期字符串转化成java.util.Date类型日期对象,代码如下: import java.text.DateFormat; import java.text.ParseExcepti ...
linux服务器改gpt模式,做一个lvm反复安装时变成了GPT格式，我想把它重新格式化成MBR的怎么做？...
一个服务器有12个硬盘因为2TB,安装是分别做了3个虚拟的diskgroup,安装了redhat 5.5 做了一个lvm,其中包含了三个设备.但其中可能在反复安装时变成了GPT格式,我想把它重新格式化 ...
JSON.toJSONString格式化成json字符串时保留null属性
第一篇 JSON.toJSONString格式化成json字符串时保留null属性原文:https://blog.csdn.net/qq_34412985/article/details/819 ...
将cookie字符串转成editthiscookie插件的json格式
问题与思路 EditThisCookie是一个cookie管理器.可用于浏览器cookie的删除,编辑,搜索,锁定和屏蔽. 而我们正常f12 network或者其他抓包方式所查看到的cookie是这样 ...
Win10怎么把磁盘格式化成exfat格式_使用命令格式化磁盘为exfat的方法
Win10怎么把磁盘格式化成exfat格式_使用命令格式化磁盘为exfat的方法发布时间:2020-03-10 14:24发布者:系统城-liumei浏览数:1100 exFAT是Microsoft ...

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

将html字符串格式化成自己想要的格式相关推荐

最新文章

热门文章