小程序之rich-text如何生成渲染DOM

   今天要吐血紧急发一篇关于小程序富文本渲染的
   之所以吐血,是因为小程序wxs语法出错无法打印,无法调试,更无从知道原因
   根据字符串,解析正则,此方法不是万能的,但,完全可以帮你省很大力气,当然它目前仅适用我的项目,稍改动一下即可

   以下为 wxs 文件内,module=m1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

function matchEmoticon(content,regStr){
var node = [{
type: 'node',
name: 'span',
children: []
}];

if(getRegExp(regStr,"g").test(content)) {
var contentCopy = content;
while (contentCopy.length > 0 && getRegExp(regStr,"g").test(contentCopy)){

var result = getRegExp(regStr).exec(contentCopy);
var searchIndex = contentCopy.search(getRegExp(regStr));

if(searchIndex == 0){
node[0].children.push({
type: "node",
name: 'img',
attrs : { "src": "https://www.mifengapp.com/resources/emoticon/" + result[1] +".png",
style : "width: 20px;height:20px;padding: 0 1px" },
children: []
});

contentCopy = contentCopy.slice(result[0].length);

}else{
node[0].children.push({
type: "node",
name: 'span',
children: [{
type: 'text',
text: contentCopy.slice(0,searchIndex)
}]
});

contentCopy = contentCopy.slice(searchIndex);
}
}

if(contentCopy.length > 0){
node[0].children.push({
type: "node",
name: 'span',
children: [{
type: 'text',
text: contentCopy
}]
});
}

}else{
node[0].children.push({
type: 'node',
name: 'span',
children: [{
type: 'text',
text: content
}]
})
}

return node;

}


module.exports = {
matchEmoticon: matchEmoticon
};

   以下为 wxml文件内调用上述方法

1
<rich-text nodes="{{m1.matchEmoticon("监督检查吃顿饭呢看到基础酒店吧地方好的宝贝底线很好的716969797979SSS1","[\uE000]([\d]+)[\uE001]")}}"></rich-text>

  注:
   ① 为什么不用ES6?
     wxs内暂不支持ES6
   ② 为什么使用getRegExp而不是RegExp或字面量创建?
     小程序内正则使用封装的getRegExp,否则会无法解析
   ③ 为什么不提取getRegExp(regStr,”g”)做公共变量?
     不知道内部如何封装的,提取后会无法解析
   ④ 为什么用了exec还要用search?
     因为需要获取下标值,虽然exec的返回值result有result[0]和result[1],但是没有result.index
   ⑤ 代码异常了会怎样?
     内部应该做了捕获处理,会直接返回空

   希望这些问题后续能够解决,毕竟不太优雅.