uni-app如何解析html标签

捞起月亮的渔民 發表於 2020-6-19 20:45:00

<h2>一、导入rechText.js</h2>
参考网上资料uni-app如何完美解析富文本内容 核心内容如下:
<div class="cnblogs_code">
<pre>/*
graceUI rich-text 加强工具
link : graceui.hcoder.net
author : 5213606@qq.com 深海

*/

// 正则变量
var graceRichTextReg;

// 批量替换的样式 [ 根据项目需求自行设置 ]
var GRT = [
// div 样式
['div', "line-height:2em;"],
// h1 样式
['h1', "font-size:3em; line-height:1.5em;"],
// h2 样式
['h2', "font-size:2em; line-height:1.8em;"],
// h3 样式
['h3', "font-size:1.6em; line-height:2em;"],
// h4 样式
['h4', "font-size:1.2em; line-height:2em;"],
// h5 样式
['h5', "font-size:1em; line-height:2em;"],
// h6 样式
['h6', "font-size:0.9em; line-height:2em;"],
// p 样式
['p', "font-size:1em; line-height:2em;"],
// b 样式
['b', "font-size:1em; line-height:2em;"],
// strong 样式
['strong', "font-size:1em; line-height:2em;"],
// code 样式
['code', "font-size:1em; line-height:1.2em; background:#F6F7F8; padding:8px 2%; width:96%;"],
// img 样式
['img', "width:100%; margin:8px 0;"],
// blockquote
['blockquote', "font-size:1em; border-left:3px solid #D1D1D1; line-height:2em; border-radius:5px; background:#F6F7F8; padding:8px 2%;"],
// li 样式
['ul', "padding:5px 0; list-style:none; padding:0; margin:0;"],
['li', "line-height:1.5em; padding:5px 0; list-style:none; padding:0; margin:0; margin-top:10px;"],
// table
['table', "width:100%; border-left:1px solid #F2F3F4; border-top:1px solid #F2F3F4;"],
['th', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4;"],
['td', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4; padding-left:5px;"]
];

module.exports = {
format : function(html){
 html = html.replace(/<pre.*pre>?/gis, function(word){
 word =word.replace(/[\n]/gi,' ');
 word =word.replace(/ /gi,'');
 return word.replace(/[\t]/gi, '');
 });
 html = html.replace(/<pre/gi, '');
 html = html.replace(/<\/pre/gi,"</p");
 for(let i = 0; i < GRT.length; i++){
 graceRichTextReg = new RegExp('<'+GRT[0]+'>|<'+GRT[0]+' (.*?)>', 'gi');
 html = html.replace(graceRichTextReg , function(word){
 // 分析 dom 上是否带有 style=""
 if(word.indexOf('style=') != -1){
 var regIn = new RegExp('<' + GRT[0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
 return word.replace(regIn, '<'+ GRT[0] +'$1style="$2 ' + GRT[1] +'"$3$4>');
 }else{
 var regIn = new RegExp('<' + GRT[0] + '(.*?)(/?)>', 'gi');
 return word.replace(regIn, '<'+ GRT[0] +'$1 style="' + GRT[1] +'$2">');
 }
 });
 }
 return html;
}

}</pre>
</div>
<h2>二、uni-app引入rechText.js</h2>
<div class="cnblogs_code">
<pre>import graceRichText from '../../../components/richText.js';</pre>
</div>
<h2>三、核心渲染代码</h2>
<div class="cnblogs_code">
<pre><rich-text :nodes="article"></rich-text></pre>
</div>
<h2>四、最终实现效果</h2>
使用uni-app转化小程序，效果图如下: <img src="https://developers-youcong.github.io/2020/06/18/uni-app%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90html%E6%A0%87%E7%AD%BE/01.png" alt="" width="undefined" height="undefined" title="">
浏览器手机调试，效果图如下: <img src="https://developers-youcong.github.io/2020/06/18/uni-app%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90html%E6%A0%87%E7%AD%BE/02.png" alt="" width="undefined" height="undefined" title=""> 
来源：https://www.cnblogs.com/youcong/p/13166391.html

頁: [1]

琼殿技术论坛's Archiver

uni-app如何解析html标签