uni-app如何解析html标签
<p>uni-app如何解析html标签 ，主要包括 uni-app如何解析html标签 使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。</p><h2><span id="一-导入rechtextjs">一、导入rechText.js</span></h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">/*
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(/</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">pre</span><span style="color: rgba(255, 0, 0, 1)">.*pre</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">?/gis, function(word){
word =word.replace(/[\n]/gi,'</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">br </span><span style="color: rgba(0, 0, 255, 1)">/></span><span style="color: rgba(0, 0, 0, 1)">');
word =word.replace(/ /gi,'</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="padding-left:2em;"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">');
return word.replace(/[\t]/gi, '</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="padding-left:2em;"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">');
});
html = html.replace(/</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">pre</span><span style="color: rgba(255, 0, 0, 1)">/gi, '<p style</span><span style="color: rgba(0, 0, 255, 1)">="font-size:1em; margin:12px 0; line-height:1.2em; background:#F6F7F8; border-radius:5px; padding:8px 4%; width:92%;"</span><span style="color: rgba(255, 0, 0, 1)">');
html </span><span style="color: rgba(0, 0, 255, 1)">= html.replace(/<\/pre/gi,"</p");
</span><span style="color: rgba(255, 0, 0, 1)">for(let i </span><span style="color: rgba(0, 0, 255, 1)">= 0; </span><span style="color: rgba(255, 0, 0, 1)">i < GRT.length; i++){
graceRichTextReg </span><span style="color: rgba(0, 0, 255, 1)">= new </span><span style="color: rgba(255, 0, 0, 1)">RegExp('<'+GRT+'</span><span style="color: rgba(0, 0, 255, 1)">></span>|<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">'+GRT</span><span style="color: rgba(255, 0, 0, 1)">+' (.*?)</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">', 'gi');
html = html.replace(graceRichTextReg , function(word){
// 分析 dom 上是否带有 style=""
if(word.indexOf('style=') != -1){
var regIn = new RegExp('</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">' + GRT</span><span style="color: rgba(255, 0, 0, 1)"> + '(.*?)style</span><span style="color: rgba(0, 0, 255, 1)">="(.*?)"</span><span style="color: rgba(255, 0, 0, 1)">(.*?)(/?)</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">', 'gi');
return word.replace(regIn, '</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">'+ GRT</span><span style="color: rgba(255, 0, 0, 1)"> +'$1style</span><span style="color: rgba(0, 0, 255, 1)">="$2 ' + GRT +'"</span><span style="color: rgba(255, 0, 0, 1)">$3$4</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">');
}else{
var regIn = new RegExp('</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">' + GRT</span><span style="color: rgba(255, 0, 0, 1)"> + '(.*?)(/?)</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">', 'gi');
return word.replace(regIn, '</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">'+ GRT</span><span style="color: rgba(255, 0, 0, 1)"> +'$1 style</span><span style="color: rgba(0, 0, 255, 1)">="' + GRT +'$2"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">');
}
});
}
return html;
}
}</span></pre>
</div>
<p> </p>
<p><br/> >> <view style="font-size:1em; line-height:2em;text-align: justify">&nbsp;</view></p><br><br>
来源：https://www.cnblogs.com/Fooo/p/16747973.html
頁:
[1]