主要功能是html转json,然后json还原html去掉style和script标签,内联style转js对象,class转数组形式。主要依赖htmlparser2;这是一个功能强大的直接html解析库Codeimport{Parser}from"htmlparser2"constnumberValueRegexp=/^\d+$/constzeroValueRegexp=/^0[^0\s].*$/constscriptRegexp=/^script$/iconststyleRegexp=/^style$/iconstselfCloseTagRegexp=/^(meta|base|br|img|input|col|frame|link|area|param|embed|keygen|source)$/iconstTAG='标签'constTEXT='text'constCOMMENT='comment'/***删除前导和尾随空格*/exportconsttrim=val=>{return(val||'').replace(/^\s+/,'').replace(/\s+$/,'')}/***首字母大写*/exportconstcapitalize=word=>{return(word||'').replace(/(|^)[a-z]/,c=>c.toUpperCase())}/***CamelCase/SmallCamelCase,首字母小写*/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},选项)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||'',属性:{...属性},类名:类名||'',classList:options.pureClass?[]:(classNames||'').split(/\s+/).map(trim).filter(Boolean),孩子们:[]}}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,内容:评论}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.tagNameresults.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('',标签名,'>')}break;案例文本:results.push(elementInfo.content)中断;caseCOMMENT:results.push("")中断;默认值://忽略}}exportconsttoHTML=json=>{json=json||[]if(isPlainObject(json)){json=[json]}常量结果=[]json.forEach(item=>toElement(item,results))returnresults.join('')}示例constsource='
