mini-program-parser - npm Package Compare versions

Comparing version 0.3.6 to 0.3.8

component/mini-parser/index.js

@@ -18,2 +18,5 @@ Component({
   },
+  detached(){
+    this.stopTimer();
+  },
   observers: {
@@ -42,2 +45,9 @@ // 适应异步请求富文本数据
     },
+    stopTimer(){
+      if(this.queryTimer){
+        clearInterval(this.queryTimer);
+        this.queryTimer = null;
+        this.queryCount = 0;
+      }
+    },
     getContainerWidth() {
@@ -52,4 +62,3 @@ if (this.queryTimer) {
                 if (res && res.width > 0) {
-                  clearInterval(this.queryTimer);
-                  this.queryTimer = null;
+                  this.stopTimer();
                   this.setData({
@@ -66,3 +75,3 @@ containerWidth: res.width,
           // 找不到外层元素时，将自适应设置为false
-          clearInterval(this.queryTimer);
+          this.stopTimer();
           this.setData({
@@ -69,0 +78,0 @@ config: { ...this.data.config, adaptive: false },

dist/index.js

@@ -1,1 +0,1 @@
-const t={containerWidth:0},e="area,base,canvas,embed,frame,head,iframe,input,link,map,meta,param,rp,script,source,style,textarea,title,track,wbr".split(","),s="area,base,br,col,circle,ellipse,embed,frame,hr,img,input,line,link,meta,param,path,polygon,rect,source,track,use,wbr".split(","),n="address,article,aside,blockquote,dd,div,dl,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,ol,p,pre,section,table,ul".split(","),r=/^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,i=/^<\/([-A-Za-z0-9_]+)[^>]*>/,o=/^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/)>/,a=/([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g,l=[[/<\?xml.*\?>\n/,""],[/<.*!doctype.*\>\n/,""],[/<.*!DOCTYPE.*\>\n/,""],[/<!--.*?-->/gi,""],[/\/\*.*?\*\//gi,""]],c=/(\d*\.?\d*)(.*)/,u={lt:"<",gt:">",quot:'"',apos:"'",ensp:" ",emsp:" ",nbsp:" ",semi:";",ndash:"–",mdash:"—",middot:"·",lsquo:"‘",rsquo:"’",ldquo:"“",rdquo:"”",bull:"•",hellip:"…",amp:"&"};class h{config;extraData;constructor({html:e,config:s,extraData:n}){return this.config=s||{},this.extraData=n||t,e?this.steps(e):[]}steps(t){const e=this.cleanHtml(t),s=this.htmlToJson(e);return this.jsonToSkeleton(s)}cleanHtml(t){return l.forEach((e=>{const[s,n]=e;t=t.replace(s,n)})),t}decodeHtml(t){if(!t)return"";let e=t.indexOf("&");for(;-1!==e;){const s=t.indexOf(";",e+3);let n;if(-1===s)break;"#"===t[e+1]?(n=parseInt(("x"===t[e+2]?"0":"")+t.substring(e+2,s)),isNaN(n)||(t=t.substr(0,e)+String.fromCharCode(n)+t.substr(s+1))):(n=t.substring(e+1,s),u[n]&&(t=t.substr(0,e)+(u[n]||"&")+t.substr(s+1))),e=t.indexOf("&",e+1)}return t}isInvalidElement(t){const{ignoredElement:s=e}=this.config;return s.includes(t)}isSelfClosingElement(t,e){return o.test(t)||s.includes(e)}attributeProcessor(t,e){const{format:s={}}=this.config;if(s[e]){const n=s[e];Object.keys(n).forEach((e=>{const s=n[e];t[e]="function"==typeof s?s(t[e],t):s}))}return t}styleProcessor(t){const e=t.split(";"),s={},{adaptive:n=!0}=this.config,{containerWidth:r}=this.extraData;let i=0;e.forEach((t=>{if(!t)return;const[e,o=""]=t.split(":");if(e){const t=e.trim(),a=o.trim();if(n&&r){let e="";a.replace(c,(function(s,n,o){return n&&!isNaN(n)&&"px"===o&&("width"===t&&+n>r?(i=r/+n,e=`${r}${o}`):"height"===t&&i>0&&(e=`${n*i}${o}`)),""})),s[t]=e||a}else s[t]=a}}));return{styleStr:Object.keys(s).map((t=>`${t}:${s[t]}`)).join(";"),styleObj:s}}formatAttributes(t,e){if(!t)return{};const s=this;let n={};return t.replace(a,(function(t,e,r){const i=Array.prototype.slice.call(arguments);if(i.length>=3){const t=r?s.decodeHtml(r).replace(/(^|[^\\])"/g,'$1\\"'):"",{styleObj:i,styleStr:o}=s.styleProcessor(t);"style"===e?(n.styleObj=i,n[e]=o):n[e]=t}return""})),this.attributeProcessor(n,e)}updateHtmlStr(t,e){return t.substring(e.length)}htmlToJson(t){const e=[];for(;t;){if(0===t.indexOf("</")){const n=t.match(i);if(!n)continue;const[r,o]=n,a=this.updateHtmlStr(t,r);if(this.isInvalidElement(o)){t=a;continue}t=a;const l=s.includes(o);e.push({type:l?"selfClosing":"end",name:o});continue}if(0===t.indexOf("<")){const s=t.match(r);if(!s)continue;const[i,o,a=""]=s,l=this.updateHtmlStr(t,i);if(this.isInvalidElement(o)){t=l;continue}t=l;const c=this.isSelfClosingElement(i,o),u=this.formatAttributes(a,o);let h=n.includes(o)?"block":"inline";const d=u.styleObj;if(d){const{display:t}=d;t&&(h=t)}e.push({type:c?"selfClosing":"start",name:o,attrs:u,display:h});continue}const o=t.indexOf("<"),a=o<0;let l=a?t:t.substring(0,o);l=this.decodeHtml(l),t=a?"":t.substring(o),e.push({type:"text",name:"text",display:"inline",attrs:this.attributeProcessor({content:l},"text")})}return e}skeletonGenerator(t,e=0){if(t.length<=0)return[];let s=0;const n=[];for(;s<t.length;){const{genKey:r,type:i,...o}=t[s],{name:a}=o,l=`${e}_${s}_${a}`,c=["start","end"].includes(i)?"default":i;if("start"===i){const e=t.findIndex((({type:t,genKey:e})=>"end"===t&&e===r));if(-1===e)break;n.push({id:l,...o,type:c,children:this.skeletonGenerator(t.slice(s+1,e),s)}),s=e+1}else n.push({id:l,...o,type:c}),s++}return n}jsonToSkeleton(t){const e=[];return t.forEach(((t,s)=>{const{type:n}=t;switch(n){case"start":t.genKey=s,e.push(s);break;case"end":const n=e.splice(e.length-1,1)[0];t.genKey=n}})),this.skeletonGenerator(t)}}export{h as MiniParser,e as defaultIgnoreElements};
+const t={containerWidth:0},e="area,base,canvas,embed,frame,head,iframe,input,link,map,meta,param,rp,script,source,style,textarea,title,track,wbr".split(","),s="area,base,br,col,circle,ellipse,embed,frame,hr,img,input,line,link,meta,param,path,polygon,rect,source,track,use,wbr".split(","),n="address,article,aside,blockquote,dd,div,dl,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,ol,p,pre,section,table,ul".split(","),i=/^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,r=/^<\/([-A-Za-z0-9_]+)[^>]*>/,o=/^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/)>/,l=/([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g,a=[[/<\?xml.*\?>\n/,""],[/<.*!doctype.*\>\n/,""],[/<.*!DOCTYPE.*\>\n/,""],[/<!--.*?-->/gi,""],[/\/\*.*?\*\//gi,""]],c=/(\d*\.?\d*)(.*)/,u={lt:"<",gt:">",quot:'"',apos:"'",ensp:" ",emsp:" ",nbsp:" ",semi:";",ndash:"–",mdash:"—",middot:"·",lsquo:"‘",rsquo:"’",ldquo:"“",rdquo:"”",bull:"•",hellip:"…",amp:"&"};class h{config;extraData;isPureText;constructor({html:e,config:s,extraData:n}){return this.config=s||{},this.extraData=n||t,e?this.steps(e):[]}steps(t){const e=this.cleanHtml(t);this.isPureText=!/<\s*img/g.test(e);const s=this.htmlToJson(e);return this.jsonToSkeleton(s)}cleanHtml(t){return a.forEach((e=>{const[s,n]=e;t=t.replace(s,n)})),t}decodeHtml(t){if(!t)return"";let e=t.indexOf("&");for(;-1!==e;){const s=t.indexOf(";",e+3);let n;if(-1===s)break;"#"===t[e+1]?(n=parseInt(("x"===t[e+2]?"0":"")+t.substring(e+2,s)),isNaN(n)||(t=t.substr(0,e)+String.fromCharCode(n)+t.substr(s+1))):(n=t.substring(e+1,s),u[n]&&(t=t.substr(0,e)+(u[n]||"&")+t.substr(s+1))),e=t.indexOf("&",e+1)}return t}isInvalidElement(t){const{ignoredElement:s=e}=this.config;return s.includes(t)}isSelfClosingElement(t,e){return o.test(t)||s.includes(e)}attributeProcessor(t,e){const{format:s={}}=this.config;if(s[e]){const n=s[e];Object.keys(n).forEach((e=>{const s=n[e];t[e]="function"==typeof s?s(t[e],t):s}))}return t}styleProcessor(t){const e=t.split(";"),s={},{adaptive:n=!0}=this.config,{containerWidth:i}=this.extraData;let r=0;e.forEach((t=>{if(!t)return;const[e,o=""]=t.split(":");if(e){const t=e.trim(),l=o.trim();if(n&&i){let e="";l.replace(c,(function(s,n,o){return n&&!isNaN(n)&&"px"===o&&("width"===t&&+n>i?(r=i/+n,e=`${i}${o}`):"height"===t&&r>0&&(e=`${n*r}${o}`)),""})),s[t]=e||l}else s[t]=l}}));return{styleStr:Object.keys(s).map((t=>`${t}:${s[t]}`)).join(";"),styleObj:s}}formatAttributes(t,e){if(!t)return{};const s=this;let n={};return t.replace(l,(function(t,e,i){const r=Array.prototype.slice.call(arguments);if(r.length>=3){const t=i?s.decodeHtml(i).replace(/(^|[^\\])"/g,'$1\\"'):"",{styleObj:r,styleStr:o}=s.styleProcessor(t);"style"===e?(n.styleObj=r,n[e]=o):n[e]=t}return""})),this.attributeProcessor(n,e)}updateHtmlStr(t,e){return t.substring(e.length)}htmlToJson(t){const e=[];for(;t;){if(0===t.indexOf("</")){const n=t.match(r);if(!n)continue;const[i,o]=n,l=this.updateHtmlStr(t,i);if(this.isInvalidElement(o)){t=l;continue}t=l;const a=s.includes(o);e.push({type:a?"selfClosing":"end",name:o});continue}if(0===t.indexOf("<")){const s=t.match(i);if(!s)continue;const[r,o,l=""]=s,a=this.updateHtmlStr(t,r);if(this.isInvalidElement(o)){t=a;continue}t=a;const c=this.isSelfClosingElement(r,o),u=this.formatAttributes(l.replace(/ /g,""),o);let h=n.includes(o)?"block":"inline";const d=u.styleObj;if(d){const{display:t}=d;t&&(h=t)}e.push({type:c?"selfClosing":"start",name:o,attrs:u,display:h});continue}const o=t.indexOf("<"),l=o<0;let a=l?t:t.substring(0,o);a=this.decodeHtml(a),t=l?"":t.substring(o),e.push({type:"text",name:"text",display:"inline",attrs:this.attributeProcessor({content:a},"text")})}return e}transToBlock(t){const{name:e,display:s,attrs:n,children:i=[]}=t;if("img"===e)return!0;if(i.length<=0)return!1;const r=!!i.find((t=>this.transToBlock(t)));return r&&"block"!==s&&(t.display="block",n&&n.styleObj&&n.styleObj.display&&(n.styleObj.display="block",n.style+=";display:block")),r}autoFixer(t){this.isPureText||t.forEach((t=>{this.transToBlock(t)}))}skeletonGenerator(t,e=0){if(t.length<=0)return[];const{autoFix:s=!0}=this.config;let n=0;const i=[];for(;n<t.length;){const{genKey:s,type:r,...o}=t[n],{name:l}=o,a=`${e}_${n}_${l}`,c=["start","end"].includes(r)?"default":r;if("start"===r){const e=t.findIndex((({type:t,genKey:e})=>"end"===t&&e===s));if(-1===e)break;i.push({id:a,...o,type:c,children:this.skeletonGenerator(t.slice(n+1,e),n)}),n=e+1}else i.push({id:a,...o,type:c}),n++}return s&&this.autoFixer(i),i}jsonToSkeleton(t){const e=[];return t.forEach(((t,s)=>{const{type:n}=t;switch(n){case"start":t.genKey=s,e.push(s);break;case"end":const n=e.splice(e.length-1,1)[0];t.genKey=n}})),this.skeletonGenerator(t)}}export{h as MiniParser,e as defaultIgnoreElements};

package.json

 {
   "name": "mini-program-parser",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "scripts": {
@@ -5,0 +5,0 @@ "dev": "rollup -c ./rollup.dev.config.js --watch",

README.md

@@ -41,2 +41,3 @@ <h1 align="center">Mini Parser</h1>
    ```
+
 5. 小程序代码示例片段：https://developers.weixin.qq.com/s/3BHREtmN7xwn
@@ -46,7 +47,8 @@
 
-| 属性                   | 说明        | 类型                        | 默认值                   |
-| -------------------- | --------- | ------------------------- | --------------------- |
-| adaptive             | 宽度自适应模式   | boolean                   | true                  |
-| format               | 属性格式化     | -                         | -                     |
-| ignoredElement       | 无需解析的元素类型 | string[]                  | defaultIgnoreElements |
+| 属性             | 说明        | 类型       | 默认值                   |
+| -------------- | --------- | -------- | --------------------- |
+| adaptive       | 宽度自适应模式   | boolean  | true                  |
+| autoFix        | 自动修复常见问题  | boolean  | true                  |
+| format         | 属性格式化     | -        | -                     |
+| ignoredElement | 无需解析的元素类型 | string[] | defaultIgnoreElements |
 
@@ -57,4 +59,14 @@ ### adaptive
 
-默认开启，当元素的宽度超过外层容器的宽度时，脚本会自动修改其宽度为容器宽度，并等比缩放其高度（如果有设置的话）
+默认开启，当元素的宽度超过外层容器的宽度时，脚本会自动修改其宽度为容器宽度，并等比缩放其高度（如果有设置的话），注意：该模式会影响解析速度
 
+### autoFix
+
+自动修复常见问题
+
+自动修复的问题如下：
+
+- a 标签和 section 标签内存在 img 标签时，会在 style 内自动追加`display:block`
+  
+  此项当富文本内含有图片标签时开启
+
 ### format
@@ -94,33 +106,1 @@
 ```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

src/const.ts

@@ -21,9 +21,2 @@ import { ObjType, HtmlOnlyType } from "./types";
 
-// 默认元素转换对应表
-export const defaultTransMap = {
-  img: "image",
-  video: "video",
-  a: "link",
-};
-
 // 起始标签正则
@@ -30,0 +23,0 @@ export const startElementRegexp =

src/dev.ts

 import { MiniParser } from "./main";
 
-const html = ``;
+const html = `<section powered-by="xiumi.us" style="text-align: center; margin: 0px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 601px; height: auto; box-sizing: border-box;"><img class="raw-image" data-ratio="0.6701571" data-w="955" _width="100%" src="https://img1.dxycdn.com/2021/0702/676/8105647457378410943-68.jpg" style="vertical-align: middle; width: 601px; box-sizing: border-box;"/></section></section><p></p><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">湿湿湿湿湿……</div><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">「梅雨季」，大概是南方朋友才会有深刻感触的一个倒霉时节。</div><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">每到这段时间，连续阴雨 + 高温，把人搞得是又闷又热提不起劲儿，家里各处是湿湿嗒嗒罩着一层水汽，墙壁、地板「狂冒小汗珠」，给你整个小水帘洞。</div><br style="box-sizing: border-box;"/><p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">这鬼天气，搞得大家的眼眶和整个世界都湿了！😿</p><p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;"><br/></p></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><p style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="0.6671803" data-w="649" src="https://img1.dxycdn.com/2021/0702/991/8994647457378410943-68.jpg" style="color: rgb(84, 84, 84); letter-spacing: 0.4px; white-space: normal; vertical-align: middle; box-sizing: border-box;"/></p></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><p style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><br/></p></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><div style="text-align: center; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;"><span style="letter-spacing: 0.4px; font-size: 12px; color: rgb(208, 208, 208); box-sizing: border-box;">图片来源：网络</span></div><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">而梅雨天最担心的还是家里物品的安危。</div><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">房间门一打开霉味扑面而来，要是置之不理，久而久之你会发现，墙壁、瓷砖缝隙、洗衣机硅胶圈……家里各处小地方真的很容易发霉！</div><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">且，能被你看到「发霉」，意味着那可能已经是大面积霉菌森林了！</div></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="1" data-w="1080" src="https://img1.dxycdn.com/2021/0702/174/5005647457378410943-68.jpg" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><div style="text-align: center; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;"><span style="letter-spacing: 0.4px; font-size: 12px; color: rgb(208, 208, 208); box-sizing: border-box;">图片来源：站酷海洛</span><br style="box-sizing: border-box;"/></div><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">霉菌不光难看，长期吸入和接触霉菌，还有可能引发呼吸道疾病和一些过敏的问题，比如诱发过敏性鼻炎、哮喘等，危害人体健康。</div><br/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">除霉防霉，迫在眉睫！</div></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="1" data-w="640" src="https://img1.dxycdn.com/2021/0702/284/5804717457378410943-68.jpg" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><div style="text-align: center; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;"><span style="letter-spacing: 0.4px; font-size: 12px; color: rgb(208, 208, 208); box-sizing: border-box;">图片来源：网络</span></div></section><section powered-by="xiumi.us" style="text-align: right; font-size: 12px; color: rgb(208, 208, 208); box-sizing: border-box;"><div style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">-广告-</div></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="margin: 0px 0px 5px; text-align: center; position: static; box-sizing: border-box;"><section style="display: inline-block; vertical-align: top; box-sizing: border-box;"><section style="margin-bottom: -6px; line-height: 1; padding: 0px 5px; font-size: 18px; letter-spacing: 1px; text-align: right; box-sizing: border-box;"><div style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;"><strong style="box-sizing: border-box;">净狮 CLEALION 除霉防霉啫喱</strong></div></section><section style="width: 274.008px; height: 10px; background-color: rgba(161, 142, 214, 0.5); box-sizing: border-box;"><section><svg viewbox="0 0 1 1" style="float:left;line-height:0;width:0;vertical-align:top;"></svg></section></section></section></section><section powered-by="xiumi.us" style="margin: 0px 0px 5px; text-align: center; position: static; box-sizing: border-box;"><section style="display: inline-block; vertical-align: top; box-sizing: border-box;"><section style="margin-bottom: -6px; line-height: 1; padding: 0px 5px; font-size: 18px; letter-spacing: 1px; text-align: right; box-sizing: border-box;"><div style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;"><strong style="box-sizing: border-box;">除霉防霉，不是难题</strong></div></section><section style="width: 181px; height: 10px; background-color: rgba(161, 142, 214, 0.5); box-sizing: border-box;"><section><svg viewbox="0 0 1 1" style="float:left;line-height:0;width:0;vertical-align:top;"></svg></section></section></section></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">对付霉菌，除了日常注意通风、保持干燥外，快速防霉除霉好物少不了。</div><br/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">挑选除霉好物，我有三个硬指标：</div><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="margin: 10px 0px 8px; text-align: center; position: static; box-sizing: border-box;"><section style="display: inline-block; width: 601px; vertical-align: top; border-left: 3px solid rgba(161, 142, 214, 0.5); border-bottom-left-radius: 0px; padding: 0px 0px 0px 8px; height: auto; box-sizing: border-box;"><section powered-by="xiumi.us" style="text-align: justify; color: rgb(160, 160, 160); line-height: 1.6; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">1. 必须有效：针对不同位置除霉清洁，效果显著。</div><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">2. 必须简单：操作过程省时省力，懒人也能放心用。</div><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">3. 必须安全：成分安全无危害，可定期使用预防。</div></section></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">净狮除霉防霉啫喱，<span style="color: rgb(116, 97, 255); box-sizing: border-box;">来自日本浓缩配方，可以快速渗透除霉，</span>完美匹配。</div><br style="box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="0.6666667" data-w="1080" src="https://img1.dxycdn.com/2021/0702/069/6704717457378410943-68.jpg" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><br/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">配方温和，闻着就像游泳池消毒水的味道，使用过程无压力。</div><br/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">来，实际感受下这款除霉啫喱的强大。</div><br/></section></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="1.1523342" data-w="407" src="https://img1.dxycdn.com/2021/0702/539/0014717457378410943-68.png" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><div style="text-align: center; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;"><span style="letter-spacing: 0.4px; font-size: 12px; color: rgb(208, 208, 208); box-sizing: border-box;">马桶粘胶处发霉</span></div><br/></section></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="1.0771812" data-w="596" src="https://img1.dxycdn.com/2021/0702/920/6205647457378410943-68.png" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><div style="text-align: center; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;"><span style="letter-spacing: 0.4px; font-size: 12px; color: rgb(208, 208, 208); box-sizing: border-box;">厨房瓷砖</span></div></section></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="1.3948919" data-w="509" src="https://img1.dxycdn.com/2021/0702/714/0405647457378410943-68.png" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><div style="text-align: center; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;"><span style="letter-spacing: 0.4px; font-size: 12px; color: rgb(208, 208, 208); box-sizing: border-box;">洗衣机硅胶圈</span><br style="box-sizing: border-box;"/></div><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">操作同样简单，只需要把它均匀涂抹在发霉处<span style="color: rgb(154, 154, 154); box-sizing: border-box;">（厚度 3 mm 左右）</span>。</div><br/></section></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="0.5625" data-w="480" src="https://img1.dxycdn.com/2021/0702/474/9687564969378410943-68.gif" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">然后静待 3～5 小时，用湿抹布擦去即可。<span style="color: rgb(154, 154, 154); box-sizing: border-box;">（若霉菌严重，可以延长等待时间或重复使用。）</span></div><br/></section></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="0.5625" data-w="480" src="https://img1.dxycdn.com/2021/0702/496/9097564969378410943-68.gif" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><br/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">家里冰箱、洗衣机、瓷砖、水槽等多种发霉地方都可以使用。</div></section></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="0.9413093" data-w="443" src="https://img1.dxycdn.com/2021/0702/186/1278494969378410943-68.png" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><br style="box-sizing: border-box;"/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">除霉效果好的同时，还对大肠埃希氏菌和金黄色葡萄球菌的抑菌率超过 99% ；</div><br/><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">且添加了防霉成分，对巴西曲霉、绳状青霉、出芽短梗霉、球毛壳绿色木霉有 28 天的抑菌效果。</div></section></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="0.4472222" data-w="1080" src="https://img1.dxycdn.com/2021/0702/457/5287564969378410943-68.jpg" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><span style="letter-spacing: 0.4px; box-sizing: border-box;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span><div style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">对瓷砖、黄铜、不锈钢等常见材料 0 腐蚀。</div></section></section><section powered-by="xiumi.us" style="box-sizing: border-box;"><br style="box-sizing: border-box;"/></section><section powered-by="xiumi.us" style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" data-ratio="0.7993019" data-w="573" src="https://img1.dxycdn.com/2021/0702/119/0678494969378410943-68.png" style="vertical-align: middle; box-sizing: border-box;"/></section></section><section powered-by="xiumi.us" style="margin: 0px; position: static; box-sizing: border-box;"><section style="line-height: 1.8; letter-spacing: 0.4px; padding: 0px; box-sizing: border-box;"><span style="letter-spacing: 0.4px; box-sizing: border-box;">&nbsp;&nbsp;</span><span style="letter-spacing: 0.4px; box-sizing: border-box;">&nbsp;</span><div style="margin-top: 0px; margin-bottom: 0px; white-space: normal; padding: 0px; box-sizing: border-box;">饱受家中发霉困扰的朋友请速速拿下，记得回来反馈使用效果哦～</div><div style="margin-top: 0px; margin-bottom: 0px; white-space: normal; padding: 0px; box-sizing: border-box;"><br style="color: rgb(84, 84, 84); letter-spacing: 0.4px; text-align: justify;"/></div></section></section><p></p><p><br/></p>`;
 
 const data = new MiniParser({ html });
 console.log(data);

src/main.ts

@@ -23,4 +23,5 @@ import {
 class MiniParser {
-  private readonly config;
-  private readonly extraData;
+  private readonly config; // 配置信息
+  private readonly extraData; // 额外参数
+  private isPureText: boolean | undefined; // 纯文本无图片
 
@@ -36,2 +37,3 @@ constructor({ html, config, extraData }: ConstructorType) {
     const cleanHtml = this.cleanHtml(html);
+    this.isPureText = !/<\s*img/g.test(cleanHtml);
     const jsonData = this.htmlToJson(cleanHtml);
@@ -253,3 +255,3 @@ return this.jsonToSkeleton(jsonData);
         // 获取属性
-        const attrs = this.formatAttributes(attrString, name);
+        const attrs = this.formatAttributes(attrString.replace(/ /g, ""), name);
         // 配置display属性
@@ -290,5 +292,36 @@ let display = blockElements.includes(name) ? "block" : "inline";
 
+  // 当子元素含有图片标签时，将所有父级元素设置为块级元素
+  transToBlock(skeleton: JsonDataType): boolean {
+    const { name, display, attrs, children = [] } = skeleton;
+    // 当前为图片标签或无子元素则返回
+    if (name === "img") return true;
+    if (children.length <= 0) return false;
+    // 执行递归
+    const hasImage = !!children.find((item) => this.transToBlock(item));
+    // 如果存在子元素且当前元素非块级元素时
+    if (hasImage && display !== "block") {
+      skeleton.display = "block";
+      if (attrs && attrs.styleObj && attrs.styleObj.display) {
+        attrs.styleObj.display = "block";
+        attrs.style += ";display:block";
+      }
+    }
+    return hasImage;
+  }
+
+  // 自动修复常见问题
+  autoFixer(skeleton: JsonDataType[]) {
+    // 当没有图片元素时不执行
+    if (!this.isPureText) {
+      skeleton.forEach((skeletonItem) => {
+        // 解决非块级元素内含有图片元素时图片宽度为0的问题
+        this.transToBlock(skeletonItem);
+      });
+    }
+  }
+
   // 结构数据生成器
   skeletonGenerator(jsonData: JsonDataTypeDev[], parentId = 0): JsonDataType[] {
     if (jsonData.length <= 0) return [];
+    const { autoFix = true } = this.config;
     let count = 0;
@@ -327,2 +360,6 @@ const skeleton = [];
 
+    if (autoFix) {
+      this.autoFixer(skeleton);
+    }
+
     return skeleton;
@@ -329,0 +366,0 @@ }

src/types.ts

@@ -8,5 +8,5 @@ // 从容器传入的数据类型
 export interface ConstructorType {
-  config?: ConfigType;
-  extraData?: extraDataType;
-  html: string;
+  config?: ConfigType; // 配置参数
+  extraData?: extraDataType; // 额外参数，包含外部容器宽度（containerWidth）
+  html: string; // 富文本字符串
 }
@@ -16,3 +16,5 @@
 export interface AttrsMapType {
-  [key: string]: string | boolean | object | ObjType;
+  style?: string;
+  styleObj?: ObjType;
+  [key: string]: any;
 }
@@ -43,6 +45,6 @@
 export type ConfigType = {
-  adaptive?: boolean; // 自适应
+  adaptive?: boolean; // 图片自适应
+  autoFix?: boolean; // 自动修复常见问题
   format?: { [key: string]: { [key: string]: any } }; // 属性格式化
   ignoredElement?: string[]; // 忽略解析的元素类型
-  transMap?: ObjType; // 元素转换对应表
 };

tests/mock.js

@@ -83,5 +83,2 @@ exports.elementType = {
     },
-    transMap: {
-      br: "rich-text",
-    },
   },
@@ -135,3 +132,3 @@ except: [
           attrs: {},
-          display: "inline",
+          display: "block",
           type: "default",
@@ -138,0 +135,0 @@ children: [

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Improved metrics

Total package byte prevSize

77701

40.43%

Lines of code

1163

10.66%

Worsened metrics

Number of low quality alerts

4

33.33%

Number of lines in readme file

103

-16.26%

Number of low supply chain risk alerts

3

50%

No dependency changes