js拆分数据格式

需求:

将对应所选的下拉框选中数据,与下拉选做匹配,并生成树级格式数据

数据格式为:

// select 框中数据格式
const s = [{0: 104, 1: 100, 2: 101}]

// 下拉框数据为
const arr = [
{id:101,ontologyId:5,name:'11'},
{id:102,ontologyId:5,name:'11'},
{id:103,ontologyId:5,name:'11'},
{id:104,ontologyId:6,name:'11'},
{id:105,ontologyId:7,name:'11'},
{id:106,ontologyId:8,name:'11'},
]

// 需要拆分为
const groupedData = [
{    ontologyId:5,
         {id:101,name:'11'},
         {id:102,name:'11'},
         {id:103,name:'11'},
},
{    ontologyId:6,
         {id:104,name:'11'},
},
]

实现:

// 1:首先对下拉选中的数组进行改造
 s.forEach(item => {
           nS.push(item)
  });

// nS:  [101,102,103,104]


// 2: 把拉下选中,选中的数据筛选出来
labelList.value = arr.filter(item => nS.includes(item.id))

// labelList.value 该数组为筛选后的下来选数据
//[
//    {id:101,ontologyId:5,name:'11'},
//    {id:102,ontologyId:5,name:'11'},
//    {id:103,ontologyId:5,name:'11'},
//    {id:104,ontologyId:6,name:'11'},


// 3:进行拼接数据
 const groupedData = labelList.value.reduce((acc, item) => {
    // 查找是否已存在该 ontologyId 的分组
    const group = acc.find(g => g.ontologyId === item.ontologyId);

    if (group) {
      // 如果存在,将 id 添加到对应的数组中
      group.id.push(item.id);
    } else {
      // 如果不存在,创建新的分组
      acc.push({
        ontologyId: item.ontologyId,
        id: [item.id]
      });
    }

    return acc;
  }, []);

### 如何在代码中实现富文本数据拆分 富文本(rich-text)通常由 HTML 或其他标记语言组成,因此对其进行拆分需要解析其结构并提取有意义的部分。以下是几种常见的方法来实现富文本数据的拆分。 #### 方法一:基于正则表达式的字符串分割 如果富文本中的换行或其他特定模式可以通过简单的规则识别,则可以使用正则表达式进行匹配和替换。例如: ```javascript // 假设原始数据如下 let data = "<p>第一段</p><p> </p><p>第二段</p>"; // 使用正则表达式移除空段落,并将其转换为按段落拆分的结果 data = data.replace(/<p>\s*( |\r?\n?)\s*<\/p>/gi, ''); // 移除空白段落[^1] const segments = data.split(/(<\/?p>)/); // 按<p>标签拆分 console.log(segments.filter(segment => segment.trim() !== '')); // 过滤掉多余的标签或空字符 ``` 这种方法适用于简单场景下的富文本拆分,但对于复杂的嵌套结构可能不够健壮。 --- #### 方法二:利用 DOM 解析器处理 HTML 结构 对于更复杂的情况,建议使用浏览器环境中的 `DOMParser` 或 Node.js 中的相关库(如 `jsdom`)。通过解析 HTML 并遍历节点树,可以精确控制拆分逻辑。 ##### 浏览器端示例: ```javascript let htmlString = `<p>第一段</p><p></p><p>第二段<br/>第三部分</p>`; const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text/html'); // 获取所有的 p 节点 const paragraphs = Array.from(doc.querySelectorAll('p')).map(p => { return p.textContent || ''; // 提取纯文本内容 }); console.log(paragraphs); ``` ##### Node.js 环境下使用 jsdom: ```javascript const { JSDOM } = require('jsdom'); let htmlString = `<p>第一段</p><p></p><p>第二段<br/>第三部分</p>`; const dom = new JSDOM(htmlString); const paragraphs = Array.from(dom.window.document.querySelectorAll('p')) .map(p => (p.textContent || '').trim()); console.log(paragraphs); ``` 这种方式能够更好地保留语义化信息,适合处理带有复杂嵌套结构的富文本[^3]。 --- #### 方法三:Python 中使用 BeautifulSoup 处理富文本 在 Python 生态中,`BeautifulSoup` 是一种非常流行的 HTML 和 XML 解析工具,可用于高效地拆分富文本数据。 ```python from bs4 import BeautifulSoup html_string = '<p>第一段</p><p></p><p>第二段<br/>第三部分</p>' soup = BeautifulSoup(html_string, 'html.parser') paragraphs = [] for p in soup.find_all('p'): text_content = p.get_text(separator='\n').strip() if text_content: paragraphs.append(text_content) print(paragraphs) ``` 此方法不仅支持标准的 HTML 标签解析,还允许自定义分离符(如 `\n`),从而适应更多样化的输入格式[^2]。 --- #### 方法四:针对特定框架的扩展功能 某些前端框架提供了内置的支持用于操作富文本。例如,在 Vue.js 中集成 TinyMCE 编辑器时,可以直接获取经过预处理的内容并通过事件监听完成进一步的操作[^3]。 ```javascript methods: { EditorChange(newValue) { const parsedData = newValue.split(/<br\s*\/?>/i).filter(item => item.trim()); this.nextImprovementPlan = parsedData.join('\n'); // 将 br 替换为换行符 } } ``` 这种做法特别适合于动态交互的应用程序开发环境中。 --- ### 总结 以上介绍了四种不同的方式来实现富文本数据的拆分,具体选择取决于实际需求和技术栈背景。无论是 JavaScript、Python 还是结合现代 Web 开发框架,都可以找到合适的解决方案以满足业务目标。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值