当前位置: 首页 > news >正文

将富文本编辑器中的H标签处理成树形结构,支持无限层级

做富文本编辑器时,需要将文本里的标题整理成树形数据,

// 这里是数据结构
const data = [{"id": "hkyrq2ndc-36yttda0lme00","text": "阿萨德阿萨德阿萨","level": 1,"depth": 1,},{"id": "h4kgw8yp6-5cjohrp4xek00","text": "阿萨德阿萨德阿萨","level": 3,"depth": 3,},{"id": "h4kgw8yp6-8yz253xo1ds00","text": "阿萨德阿萨德阿萨","level": 2,"depth": 2,},{"id": "h4kgw8yp6-98ln0anedx400","text": "阿萨德阿萨德阿萨","level": 1,"depth": 1,},{"id": "h4kgw8yp6-35frnwvulba000","text": "胜多负少","level": 2,"depth": 2,}
];// 这里是是实现方法
function buildTree(data) {// 用来存储树形结构的根节点const root = [];// 用一个Map来存储每个节点,方便快速查找const map = new Map();// 当前处理的节点栈,用于维护父子关系const stack = [];// 遍历所有节点data.forEach(item => {// 初始化当前节点的子节点数组item.children = [];// 把当前节点添加到map中map.set(item.id, item);// 如果栈为空,说明是根节点if (stack.length === 0) {root.push(item);stack.push(item);} else {// 找到栈中最近的同级或更高级的节点while (stack.length > 0 && stack[stack.length - 1].level >= item.level) {stack.pop();}// 如果栈为空,说明是新的一组根节点if (stack.length === 0) {root.push(item);} else {// 否则,将当前节点添加到父节点的子节点数组中const parent = stack[stack.length - 1];parent.node.push(item);}// 将当前节点压入栈中stack.push(item);}});return root;
}// 调用函数生成树形结构
const tree = buildTree(data);
console.log(JSON.stringify(tree, null, 2));

在这里插入图片描述

http://www.lryc.cn/news/351360.html

相关文章:

  • 探索移动云:我的ES与Kibana之旅
  • java 线程执行原理,java线程在jvm中执行流程
  • [Redis]基本全局命令
  • 【Linux】- HBase集群部署 [19]
  • js如何遍历FormData的值
  • 【C语言】明析部分C语言内存函数
  • 一阶数字高通滤波器
  • Linux多线程系列2: 模拟封装简易语言级线程库,线程互斥和锁,线程同步和条件变量,线程其他知识点
  • VUE3-form表单保存附件与基本信息
  • 无线网络安全技术基础
  • sheng的学习笔记-docker部署Greenplum
  • 【投稿资讯】区块链会议CCF A -- SP 2025 截止6.6、11.14 附录用率
  • C++哪些函数不能被声明为虚函数
  • vue中数据已经改变了,但是table里面内容没更新渲染!
  • 头歌实践教学平台:Junit实训入门篇
  • matlab使用教程(80)—修改图形对象的透明度
  • mysql bin 日志转成sql
  • 河南道路与桥梁乙级资质申请:注册证书与职称证书准备
  • 3D工业视觉
  • 使用auth_basic模块进行基础认证
  • 深度解析物联网平台:优化数据点位管理的实战策略
  • Spring常见问题
  • MiniMax Golang2轮面试,期望薪资25K
  • MyBatis系统学习篇 - MyBatis的缓存
  • K-means聚类模型
  • 免费分享一套微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】,帅呆了~~
  • Matlab 2023b学习笔记1——界面认识
  • C++ sort排序的总和应用题
  • [力扣]——231.2的幂
  • 【css】引入背景图时候,路径写入@会报错