微信小程序实现某个关键字高亮显示

微信小程序实现某个关键字高亮显示

需求: 实现对列表搜索的关键字进行高亮显示

  • js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Page({
data: {
motto: '<高亮 A>',
list:[
'WaC38',
'W2A81',
'E2A18',
'E2A61',
'E3Ca1',
'E2C81',
'E4a43',
'E4A65'
]
},
onLoad: function () {
}
})
  • wxml
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--公共的wxs工具-->
<wxs src="../../wxs/highLight.wxs" module="util" />
<view class="container">
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<view wx:for="{{list}}" wx:key="item" >
<view wx:for="{{util.highLight(item,'A')}}" wx:key="item" style="float:left;">
<text wx:if="{{item.type==1}}" decode="true" space="true" style='color:red;'>{{util.myReplace(item.text)}} </text>
<text wx:else decode="true" space="true">{{util.myReplace(item.text)}}</text>
</view>
</view>
</view>
  • wxs —公共的处理高亮的方法
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
var sliceStr = function (str, len) {
var len = len || 8;
if (str != null) {
if (str.length > len) {
return str.substring(0, len) + "...";
} else {
return str;
}
}
return '';
}
var highLight = function (content, key, res) {
if (res == undefined) {
res = [];
}
key = key.toUpperCase();
var keyLen = key.length;
var tmp = content.toUpperCase();
if (tmp.length >= keyLen && keyLen > 0) {

var index = -1;
index = tmp.indexOf(key);

if (index != -1) {
var n = content.substring(0, index);
res.push({
type: 2,
text: n
});
var y = content.substring(index, index + keyLen);
res.push({
type: 1,
text: y
});
content = content.substring(index + keyLen, content.length);
highLight(content, key, res);
} else {
res.push({
type: 2,
text: content
});
}
} else {
res.push({
type: 2,
text: content
});
}
return res;
}
var myReplace = function (content) {
content = content.replace(" ", "&nbsp;");
if (content.indexOf(" ") != -1) {
return myReplace(content);
}

return content;
}
module.exports.myReplace = myReplace;
module.exports.highLight = highLight;
module.exports.sliceStr = sliceStr;

运行结果

image

源码地址

-------------已经触及底线 感谢您的阅读-------------

本文标题:微信小程序实现某个关键字高亮显示

文章作者:趙小傑~~

发布时间:2018年07月13日 - 16:57:36

最后更新:2019年07月26日 - 23:32:12

原始链接:https://cnsyear.com/posts/39fed7e1.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%