当前位置: 首页 > 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));

在这里插入图片描述

相关文章:

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

做富文本编辑器时,需要将文本里的标题整理成树形数据, // 这里是数据结构 const data [{"id": "hkyrq2ndc-36yttda0lme00","text": "阿萨德阿萨德阿萨","level": 1,"depth": 1,},{"…...

探索移动云:我的ES与Kibana之旅

目录 引言: 如何免费体验移动云产品 登录并完成实名认证 选择试用ECS云主机 安全组配置 安装Elasticsearch和Kibana 安装Elasticsearch ​编辑安装kibana 测试结果 使用感觉 引言: 移动云技术产品的发展已经取得了巨大的进步。云数融合、A1、大…...

java 线程执行原理,java线程在jvm中执行流程

java 线程执行原理,java线程在jvm中执行流程 从jvm视角看java线程执行过程 ##首先thread.c注册jni函数 JNIEXPORT void JNICALL Java_java_lang_Thread_registerNatives(JNIEnv *env, jclass cls) {(*env)->RegisterNatives(env, cls, methods, ARRAY_LENGTH(…...

[Redis]基本全局命令

Redis存储方式介绍 在 Redis 中数据是以键值对的凡事存储的,键(Key)和值(Value)是基本的数据存储单元。以下是对 Redis 键值对的详细讲解: 键(Key): 类型:…...

【Linux】- HBase集群部署 [19]

简介 apache HBase是一种分布式、可扩展、支持海量数据存储的 NoSQL 数据库。 和Redis一样,HBase是一款KeyValue型存储的数据库。 不过和Redis涉及方向不同 Redis设计为少量数据,超快检索HBase设计为海量数据,快速检索 HBase在大数据邻域…...

js如何遍历FormData的值

遍历FormData的值,一般有2种方法:forEach 和 for...of entries const data new FormData();data.append(aaa, 111); data.append(bbb, 222);// 方法1 data.forEach((value, key) > {console.log(key, value); }) 输出 aaa 111 和 bbb 222// 方法2 …...

【C语言】明析部分C语言内存函数

目录 1.memcpy 2.memmove 3.memset 4.memcmp 以下都是内存函数,作用单位均是字节 1.memcpy memcpy是C/C语言中的一个内存拷贝函数,其原型为: void* memcpy(void* dest, const void* src, size_t n);目标空间(字节&#xff09…...

一阶数字高通滤波器

本文的主要内容包含一阶高通滤波器公式的推导和数字算法的实现以及编程和仿真 1 计算公式推导 1.1.2 算法实现及仿真 利用python实现的代码如下: import numpy as np # from scipy.signal import butter, lfilter, freqz import matplotlib.pyplot as plt #2pifW…...

Linux多线程系列2: 模拟封装简易语言级线程库,线程互斥和锁,线程同步和条件变量,线程其他知识点

Linux多线程系列2: 模拟封装简易语言级线程库,线程互斥和互斥锁,线程同步和条件变量,线程其他知识点 1.前言 一.模拟C11线程库自己封装简易语言级线程库1.实现框架2.迅速把构造等等函数写完3.start和work1.尝试一2.尝试二3.最终版本4.给出代码 二.模拟实现多线程(为编写线程池做…...

VUE3-form表单保存附件与基本信息

element-ui代码 <el-dialog :title"上传附件" v-model"dialogAdds.visible" width"500px" append-to-body> <el-form-item label"唯一标识"> <dict-tag v-if"form.groupId" :options"unique_identifica…...

无线网络安全技术基础

无线网络安全技术基础 无线网络安全风险和隐患 随着无线网络技术广泛应用,其安全性越来越引起关注.无线网络的安全主要有访问控制和数据加密,访问控制保证机密数据只能由授权用户访问,而数据加密则要求发送的数据只能被授权用户所接受和使用。 无线网络在数据传输时以微波进…...

sheng的学习笔记-docker部署Greenplum

目录 docker安装gp数据库 mac版本 搭建gp数据库 连接数据库 windows版本 搭建gp数据库 连接数据库 docker安装gp数据库 mac版本 搭建gp数据库 打开终端&#xff0c;输入代码&#xff0c;查看版本 ocker search greenplum docker pull projectairws/greenplum docker…...

【投稿资讯】区块链会议CCF A -- SP 2025 截止6.6、11.14 附录用率

会议名称&#xff1a;46th IEEE Symposium on Security and Privacy( S&P&#xff09; CCF等级&#xff1a;CCF A类学术会议 类别&#xff1a;网络与信息安全 录用率&#xff1a;2023年 195/1147&#xff0c;2024年录用了17篇和区块链相关的论文 Topics of interest inc…...

C++哪些函数不能被声明为虚函数

在C中&#xff0c;某些函数不能被声明为虚函数。下面详细解释哪些函数不能被声明为虚函数&#xff0c;并通过代码示例进行说明。 C哪些函数不能被声明为虚函数 不能声明为虚函数的函数示例代码及解释一、构造函数不能是虚函数二、静态成员函数不能是虚函数三、友元函数不能是虚…...

vue中数据已经改变了,但是table里面内容没更新渲染!

解决方案&#xff1a; 给table或者el-table标签上添加一个动态key值&#xff0c;只要数据发生改变&#xff0c;key值变动一下即可 标签上&#xff1a; :key“timeStamp” 初始data&#xff1a;timeStamp:0, 更新数据&#xff1a;this.timeStamp 这样每次更新数据&#xff…...

头歌实践教学平台:Junit实训入门篇

第2关&#xff1a;Junit注解 任务描述 给出一个带有注解的Junit代码及其代码打印输出&#xff0c;要求学员修改注解位置&#xff0c;让输出结果变为逆序。 相关知识 Junit注解 Java注解&#xff08;(Annotation&#xff09;的使用方法是" 注解名" 。借助注解&a…...

matlab使用教程(80)—修改图形对象的透明度

1.更改图像、填充或曲面的透明度 此示例说明如何修改图像、填充或曲面的透明度。 1.1坐标区框中所有对象的透明度 透明度值称为 alpha 值。使用 alpha 函数设置当前坐标区范围内所有图像、填充或曲面对象的透明度。指定一个介于 0&#xff08;完全透明&#xff09;和 1&#x…...

mysql bin 日志转成sql

首先确定mysql binlog 服务开启 SHOW VARIABLES LIKE log_bin; 找到binlog日志 find / -name mysql-bin.* -type f 下载下来 本地找到mysql安装位置的bin目录 在窗口路径处直接输入cmd 执行 mysqlbinlog --no-defaults --base64-outputdecode-rows -v --start-datetime&…...

河南道路与桥梁乙级资质申请:注册证书与职称证书准备

在河南道路与桥梁乙级资质申请中&#xff0c;注册证书与职称证书的准备是不可或缺的环节。以下是关于如何准备这些证书的一些关键步骤和要点&#xff1a; 明确所需证书类型&#xff1a; 注册证书&#xff1a;这通常指的是相关专业的注册工程师证书&#xff0c;如注册土木工程师…...

3D工业视觉

前言 本文主要介绍3D视觉技术、工业领域的应用、市场格局等&#xff0c;主要技术包括激光三角测量、结构光、ToF、立体视觉。 一、核心内容 3D视觉技术满足工业领域更高精度、更高速度、更柔性化的需求&#xff0c;扩大工业自动化的场景。 2D视觉技术基于物体平面轮廓&#…...

解放词库自由:跨平台词库迁移的全场景解决方案

解放词库自由&#xff1a;跨平台词库迁移的全场景解决方案 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 当你更换新手机时&#xff0c;是否曾为输入法里积累多年的…...

基于条件风险价值CVaR的微网/虚拟电厂多场景随机规划 摘要:构建了含风、光、燃、储的微网/虚...

基于条件风险价值CVaR的微网/虚拟电厂多场景随机规划 摘要&#xff1a;构建了含风、光、燃、储的微网/虚拟电厂优化调度模型&#xff0c;在此基础上&#xff0c;考虑多个风光出力场景&#xff0c;构建了微网随机优化调度模型&#xff0c;并在此基础上&#xff0c;基于条件风险价…...

Qwen3-14B私有部署镜像Node.js环境配置与API服务搭建

Qwen3-14B私有部署镜像Node.js环境配置与API服务搭建 1. 开篇&#xff1a;为什么选择Node.js对接Qwen3-14B 如果你正在寻找一个高效的方式来将Qwen3-14B大模型集成到你的应用中&#xff0c;Node.js可能是最合适的选择。作为现代JavaScript运行时&#xff0c;Node.js的非阻塞I…...

16G内存就够了!GPT-OSS-20B量化版实测,响应速度快人一步

16G内存就够了&#xff01;GPT-OSS-20B量化版实测&#xff0c;响应速度快人一步 1. 开箱即用的高性能AI体验 在AI大模型遍地开花的今天&#xff0c;找到一个既强大又能在普通设备上流畅运行的模型实属不易。GPT-OSS-20B的出现打破了这一局面——这个由OpenAI开源的210亿参数模…...

别再只用TF-IDF了!揭秘TextRank与BERT结合的关键词提取新玩法(附Colab实操)

超越TF-IDF&#xff1a;TextRank与BERT融合的关键词提取实战指南 在信息爆炸的时代&#xff0c;快速准确地从海量文本中提取核心关键词已成为NLP工程师的必备技能。传统方法如TF-IDF虽然简单高效&#xff0c;但面对社交媒体短文本、学术论文摘要等复杂场景时&#xff0c;往往力…...

Webpack Tree Shaking配置终极指南:如何在Awesome-Webpack中优化现代前端项目

Webpack Tree Shaking配置终极指南&#xff1a;如何在Awesome-Webpack中优化现代前端项目 【免费下载链接】awesome-webpack A curated list of awesome Webpack resources, libraries and tools 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-webpack Webpack …...

【学习笔记】C++(2)

C++学习笔记 三、进阶 —— 类和对象 1、概述 2、基础 —— 公有、私有、保护、构造、析构 3、拷贝构造、临时对象不能绑定到非const引用问题 4、浅拷贝、深拷贝、移动拷贝 5、静态 6、内联和外联 7、链表 8、函数模板和类模板 9、友元 10、继承-派生(1) —— 基础 11、继承-…...

台达 PLC ES 与 3 台欧姆龙 E5CC 温控器通讯程序分享

台达PLC ES与3台欧姆龙E5CC温控器通讯程序 程序带注释&#xff0c;并附送昆仑通态和威纶通触摸屏有接线方式&#xff0c;设置 程序温度可靠 器件&#xff1a;台达DVP ES系列的PLC&#xff0c;3台欧姆龙E5CC系列温控器&#xff0c;昆仑通态&#xff0c;威纶通触摸屏 功能&#x…...

SecGPT-14B API保护:防止OpenClaw任务过度消耗模型资源

SecGPT-14B API保护&#xff1a;防止OpenClaw任务过度消耗模型资源 1. 为什么需要API保护机制 上周我在本地部署了SecGPT-14B模型&#xff0c;并尝试通过OpenClaw实现自动化安全报告生成。凌晨3点突然收到服务器告警——模型服务因资源耗尽崩溃了。检查日志发现&#xff0c;O…...

告别抓包失败!保姆级配置:让Burp+Proxifier稳定抓取任意微信小程序

微信小程序抓包实战&#xff1a;BurpProxifier零失败配置指南 每次调试微信小程序接口都像在玩捉迷藏&#xff1f;明明按照教程一步步操作&#xff0c;却总在最后一步功亏一篑。作为经历过数十次抓包失败的过来人&#xff0c;我总结出一套"一次配置终身受用"的解决方…...