将富文本编辑器中的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.mzph.cn/diannao/14128.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Window Linux 权限提升

#基础点: 0、为什么我们要学习权限提升转移技术: 简单来说就是达到目的过程中需要用到它 心里要想着我是谁 我在哪 我要去哪里 1、具体有哪些权限需要我们了解掌握的: 后台权限,数据库权限,Web权限,用户权…

【VTKExamples::Texture】第六期 TextureThreshold

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例TextureThreshold,并解析接口vtkTexture,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~Y…

127.数据异构方案

文章目录 前言一、数据异构的常用方法1. 完整克隆2. MQ方式3. binlog方式 二、MQ与Binlog方案实现MQ方式binlog方式注意点 三、总结 前言 何谓数据异构:把数据按需(数据结构、存取方式、存取形式)异地构建存储。比如我们将DB里面的数据持久化…

云和恩墨海外首秀在吉隆坡召开的2024中国智能科技与文化展览会

作为中马建交50周年官方重点推荐的活动之一,2024中国智能科技与文化展览会(第四届)于5月20至21日在毗邻吉隆坡双子塔的吉隆坡国际会展中心举办。本次展览会获得马来西亚科学技术创新部、马来西亚通讯部、中国驻马来西亚大使馆和马来西亚中华总…

【Linux学习】进程地址空间与写时拷贝

文章目录 Linux进程内存布局图&#xff1a;内存布局的验证 进程地址空间写时拷贝 Linux进程内存布局图&#xff1a; 地址空间的范围&#xff0c;在32位机器上是2^32比特位,也就是[0,4G]。 内存布局的验证 代码验证内存布局&#xff1a; 验证代码&#xff1a; #include<s…

linux系统安全加固

目录 1、账户安全基本措施 1&#xff09;系统账户清理 2&#xff09;密码安全控制 3&#xff09;命令历史限制 2、用户切换及提权 1&#xff09;使用 su命令切换用户 2&#xff09;使用sudo机制提升权限 3、系统引导和安全登录控制 1&#xff09;开机安全控制 2&…

python数据处理与分析入门-Pandas数据可视化例子

相关内容 Matplotlib可视化练习 Pandas 数据可视化总结 柱状图 reviews[points].value_counts().sort_index().plot.bar()散点图 reviews[reviews[price] < 100].sample(100).plot.scatter(xprice, ypoints)蜂窝图 reviews[reviews[price] < 100].plot.hexbin(xprice…

Helm安装kafka3.7.0无持久化(KRaft 模式集群)

文章目录 2.1 Chart包方式安装kafka集群 5.开始安装2.2 命令行方式安装kafka集群 搭建 Kafka-UI三、kafka集群测试3.1 方式一3.2 方式二 四、kafka集群扩容4.1 方式一4.2 方式二 五、kafka集群删除 参考文档 [Helm实践---安装kafka集群 - 知乎 (zhihu.com)](https://zhuanlan.…

Nginx - 健康检查终极指南:探索Upstream Check模块

文章目录 概述upstream_check_module模块安装和配置指南模块安装步骤基本配置示例详细配置说明检查类型和参数常见问题及解决方案 SSL检查和DNS解析功能SSL检查配置示例和说明配置示例 DNS解析配置示例和说明配置示例 结合实际应用场景的高级配置示例综合SSL检查与DNS解析 总结…

Doris【部署 03】Linux环境Doris数据库部署异常问题收集解决(不断更新)

Linux环境Doris数据库部署异常问题 1.FE1.1 Unknown system variable character_set_database1.2 notify new FE type transfer: UNKNOWN1.3 mysql_load_server_secure_path1.4 Only unique table could be updated1.5 too many filtered rows 2.BE2.1 Have not get FE Master …

正确可用--Notepad++批量转换文件编码为UTF8

参考了:Notepad批量转换文件编码为UTF8_怎么批量把ansi转成utf8-CSDN博客​​​​​​https://blog.csdn.net/wangmy1988/article/details/118698647我参考了它的教程,但是py脚本写的不对. 只能改一个.不能实现批量更改. 他的操作步骤没问题,就是把脚本代码换成我这个. #-*-…

graspnet+Astra2相机实现部署

graspnetAstra2相机实现部署 &#x1f680; 环境配置 &#x1f680; ubuntu 20.04Astra2相机cuda 11.0.1cudnn v8.9.7python 3.8.19pytorch 1.7.0numpy 1.23.5 1. graspnet的复现 具体的复现流程可以参考这篇文章&#xff1a;Ubuntu20.04下GraspNet复现流程 这里就不再详细…

数据库系统概论(第5版)复习笔记

笔记的Github仓库地址 &#x1f446;这是笔记的gihub仓库&#xff0c;内容是PDF格式。 因为图片和代码块太多&#xff0c;放到CSDN太麻烦了&#xff08;比较懒&#x1f923;&#xff09; 如果感觉对各位有帮助的话欢迎点一个⭐\^o^/

41-4 DDOS攻击防护实战

一、UDP FLOOD攻击 # hping3 -q -n -a <攻击IP> -S -s <源端口> --keep -p <目的端口> --flood <被攻击IP> hping3 --udp -s 6666 -p 53 -a 192.168.1.6 --flood 192.168.1.13 这个命令是使用hping3工具进行UDP Flood攻击的命令。下面是各个选项的作…

three.js能实现啥效果?看过来,这里都是它的菜(06)

这是第五期了&#xff0c;本期继续分享three.js可以实现的3D动画案例&#xff0c;有老铁反馈再发案例的时候&#xff0c;是否可以顺道分享一下three.js的知识点&#xff0c;好吧&#xff0c;安排。 材质动画 材质动画可以实现各种复杂的视觉效果&#xff0c;包括但不限于以下…

【css】引入背景图时候,路径写入@会报错

看报错信息 我的写法 解决办法 在前面加个~

js解决数字小数计算出现的精度丢失问题(2024-05-24)

精度丢失的原因 js小数进行数值运算时出现精度丢失问题 JavaScript 的number类型在进行运算时都先将十进制转二进制&#xff0c;此时&#xff0c;小数点后面的数字转二进制时会出现无限循环的问题。 为了避免这一个情况&#xff0c;要舍0进1&#xff0c;此时就会导致精度丢失…

企业宽带跑pcdn会被查吗?

企业宽带使用PCDN技术&#xff0c;本身并不违反相关规定&#xff0c;因此一般不会被查。PCDN是一种内容分发网络技术&#xff0c;通过将内容缓存在离用户更近的服务器上&#xff0c;减少数据传输的延迟&#xff0c;提高访问速度。这种技术可以提高网页加载速度和视频播放流畅度…

Excel未响应时强关后,Excel插件消失

目录 我们分析一下插件消失的原因&#xff1a; 针对上面表现出来的2个问题&#xff0c;进行针对性的解决 &#xff1a; 1、不被关进去&#xff0c;是不是就没有后续的一系列的问题了&#xff0c;各自安好 2、保留住自动加载的行为 PS&#xff1a;配置受信任的位置注册列表…

2024电工杯B题保姆级分析完整思路+代码+数据教学

2024电工杯B题保姆级分析完整思路代码数据教学 B题题目&#xff1a;大学生平衡膳食食谱的优化设计及评价 接下来我们将按照题目总体分析-背景分析-各小问分析的形式来 总体分析&#xff1a; 题目要求对两份一日膳食食谱进行营养分析和调整&#xff0c;然后设计优化的平衡膳…