递归手撕,JSON 字符串化和解析,加权树结构的字符串解析对象,解析并返回DOM 树结构(DOMParser),解析带有层级的文本

目录

[1 JSON 字符串化和解析](#1 JSON 字符串化和解析)

[2 加权树结构的字符串解析对象](#2 加权树结构的字符串解析对象)

[3. 解析并返回DOM 树结构](#3. 解析并返回DOM 树结构)

[4. 解析带有层级的文本](#4. 解析带有层级的文本)


1 JSON 字符串化和解析

javascript 复制代码
//  <!-- 实现一个函数,能够将自定义格式的字符串转换为 JSON 对象。
//      例如,给定字符串 'name: "Alice", age: 30',输出 { name: "Alice", age: 30 }。 -->
function digui(str){
 //首先 截取,的前后 然后截取:的前后
 let obj={}
 //str1='' x.slice()
 let arr=str.split(',')
 //['name:'alice],['age':'30']

 //考虑到alice外的引号和:后的空白没
 arr.map((item,index)=>{
  let [apple,pine]=item.split(': ').map((i)=>i.trim())
  pine=JSON.parse(pine)
  obj[apple]=pine

 })
 return obj

}
let str='name: "Alice", age: 30'
console.log(digui(str))

2 加权树结构的字符串解析对象

给定一个加权树结构的字符串,例如 '(A:3,(B:2,C:1))',解析为一个对象 { A: 3, B: 2, C: 1 }。

javascript 复制代码
//遇到左括号 递归 处理去掉逗号后 去掉冒号 第
  function digui(str){
//干脆去除所有括号 
let str2=''
for(let i=0;i<str.length;i++){
 
  if(str[i]!='(' && str[i]!=')')
  str2+=str[i]

}
let obj={}
let lines=str2.split(',').map(item => item.trim())
//[a:3],[b,3]
lines.forEach((item)=>{
  let [apple,pine]=item.split(':').map(item => item.trim())
  obj[apple]=pine

})
return obj


  }
  let str='(A:3,(B:2,C:1))'
  console.log(digui(str))

3. 解析并返回DOM 树结构

实现一个函数,能够解析简单的 HTML 字符串并返回 DOM 树结构。

javascript 复制代码
function apple(str){
let parser = new DOMParser()
let tryparser = parser.parseFromString(str,'text/html').body.firstChild
return tryparser
  }

  let str= "<div><span>Hello</span><p>World</p></div>";
  console.log(apple(str)); 

解析后返回的文档中包含一个完整的 HTML 文档结构(包含 <html><head><body> 标签),.body 选择其中的 <body> 元素。firstChild 选择 <body> 中的第一个子节点div。

text/html' 告诉浏览器和 JavaScript 解释器要将字符串按照 HTML 格式解析。

4. 解析带有层级的文本

编写一个函数将其解析为树形结构。

javascript 复制代码
function treee(str){
    let root={value:'root',children:[]}
  let st=[root]
  let lines=str.split('\n')
  lines.forEach(line=>{
let level=line.search(/\S/)
let node={value:line.trim(),children:[]}
while(st.length>level+1){
  st.pop()
}
st[st.length-1].children.push(node)
st.push(node)
  })
   return root 
  
  }
  const text = 'A\n  B\n    C\n  D';
    console.log(JSON.stringify(treee(text), null, 2));
  
相关推荐
GISer_Jing13 分钟前
[总结篇]个人网站
前端·javascript
ss.li14 分钟前
TripGenie:畅游济南旅行规划助手:个人工作纪实(二十二)
javascript·人工智能·python
疯狂的沙粒34 分钟前
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
前端·uni-app·html
小妖66638 分钟前
html 滚动条滚动过快会留下边框线
前端·html
heroboyluck1 小时前
Svelte 核心语法详解:Vue/React 开发者如何快速上手?
前端·svelte
海的诗篇_1 小时前
前端开发面试题总结-JavaScript篇(二)
开发语言·前端·javascript·typescript
琹箐1 小时前
ant-design4.xx实现数字输入框; 某些输入法数字需要连续输入两次才显示
前端·javascript·anti-design-vue
程序员-小李1 小时前
VuePress完美整合Toast消息提示
前端·javascript·vue.js
Uyker2 小时前
从零开始制作小程序简单概述
前端·微信小程序·小程序
Dontla5 小时前
为什么React列表项需要key?(React key)(稳定的唯一标识key有助于React虚拟DOM优化重绘大型列表)
javascript·react.js·ecmascript