html转json

json在存储的功能上一直受到很多人的追捧，除此之外由于适用的标点符号数目少，也减少一些不必要的字符使用。鉴于它的这些优点，我们是可以把html转换成json来用的。在正式开始之前，我们需要对json的概念有所了解，然后再进行代码模块的学习，下面我们来看看具体内容。

1.json概念

json(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它起源于JavaScript的数据对象，之后独立成为一种web较为流行的数据交换标准。

json的语法，是非常明显的键值对结构，比较利于理解：

{
"note":{
"to":"George",
"from":"John",
"heading":"Reminder",
"body":"Don'tforgetthemeeting!"
}
}

2.实例

import{Parser}from"htmlparser2"

constnumberValueRegexp=/^\d+$/
constzeroValueRegexp=/^0[^0\s].*$/
constscriptRegexp=/^script$/i
conststyleRegexp=/^style$/i
constselfCloseTagRegexp=/^(meta|base|br|img|input|col|frame|link|area|param|embed|keygen|source)$/i

constTAG='tag'
constTEXT='text'
constCOMMENT='comment'

/**
*去除前后空格
*/
exportconsttrim=val=>{
return(val||'').replace(/^\s+/,'').replace(/\s+$/,'')
}
/**
*首字母大写
*/
exportconstcapitalize=word=>{
return(word||'').replace(/(|^)[a-z]/,c=>c.toUpperCase())
}
/**
*驼峰命名法/小驼峰命名法,首字母小写
*/
exportconstcamelCase=key=>{
return(key||'').split(/[_-]/).map((item,i)=>i===0?item:capitalize(item)).join('')
}
/**
*大驼峰命名法，首字母大写
*/
exportconstpascalCase=key=>{
return(key||'').split(/[_-]/).map(capitalize).join('')
}
exportconstisPlainObject=obj=>{
returnObject.prototype.toString.call(obj)==='[objectObject]'
}
/**
*行内样式转Object
*/
exportconststyle2Object=(style)=>{
if(!style||typeofstyle!=='string'){
return{}
}
conststyleObject={}
conststyles=style.split(/;/)
styles.forEach(item=>{
const[prop,value]=item.split(/:/)
if(prop&&value&&trim(value)){
constval=trim(value)
styleObject[camelCase(trim(prop))]=zeroValueRegexp.test(val)?0:numberValueRegexp.test(val)?Number(val):val
}
})
returnstyleObject
}

exportconsttoJSON=(html,options)=>{
options=Object.assign({skipStyle:false,skipScript:false,pureClass:false,pureComment:false},options)
constjson=[]
letlevelNodes=[]
constparser=newParser({
onopentag:(name,{style,class:classNames,...attrs}={})=>{
letnode={}
if((scriptRegexp.test(name)&&options.skipScript===true)||
(styleRegexp.test(name)&&options.skipStyle===true)){
node=false
}else{
if(options.pureClass===true){
classNames=''
}
node={
type:TAG,
tagName:name,
style:style2Object(style),
inlineStyle:style||'',
attrs:{...attrs},
classNames:classNames||'',
classList:options.pureClass?[]:(classNames||'').split(/\s+/).map(trim).filter(Boolean),
children:[]

}
}
if(levelNodes[0]){
if(node!==false){
constparent=levelNodes[0]
parent.children.push(node)
}
levelNodes.unshift(node)
}else{
if(node!==false){
json.push(node)
}
levelNodes.push(node)
}
},
ontext(text){
constparent=levelNodes[0]
if(parent===false){
return
}
constnode={
type:TEXT,
content:text
}
if(!parent){
json.push(node)
}else{
if(!parent.children){
parent.children=[]
}
parent.children.push(node)
}
},
oncomment(comments){
if(options.pureComment){
return
}
constparent=levelNodes[0]
if(parent===false){
return
}
constnode={
type:COMMENT,
content:comments
}
if(!parent){
json.push(node)
}else{
if(!parent.children){
parent.children=[]
}
parent.children.push(node)
}
},
onclosetag(){
levelNodes.shift()
},
onend(){
levelNodes=null
}
})
parser.done(html)
returnjson
}
constsetAttrs=(attrs,results)=>{
Object.keys(attrs||{}).forEach(k=>{
if(!attrs[k]){
results.push(k)
}else{
results.push('',k,'=','"',attrs[k],'"')
}
})
}
consttoElement=(elementInfo,results)=>{

switch(elementInfo.type){
caseTAG:
consttagName=elementInfo.tagName
results.push('<',tagName)
if(elementInfo.inlineStyle){
results.push('style="',elementInfo.inlineStyle,'"')
}
if(elementInfo.classNames){
results.push('class="',elementInfo.classNames,'"')
}
setAttrs(elementInfo.attrs,results)
if(selfCloseTagRegexp.test(tagName)){
results.push('/>')
}else{
results.push('>')
if(Array.isArray(elementInfo.children)){
elementInfo.children.forEach(item=>toElement(item,results))
}
results.push('</',tagName,'>')
}
break;
caseTEXT:
results.push(elementInfo.content)
break;
caseCOMMENT:
results.push("<!--",elementInfo.content,"-->")
break;
default:
//ignore
}
}
exportconsttoHTML=json=>{
json=json||[]
if(isPlainObject(json)){
json=[json]
}
constresults=[]
json.forEach(item=>toElement(item,results))
returnresults.join('')
}

原文来自：https://www.py.cn