需求
最近在做微信小程序的时候,需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果,目前的思路是,递归后台来返回的数据,并将对象的value值替换为需要的dom节点,并且通过rich-text来实现,高亮效果。
思路
在实现的过程中主要考虑,不同类型的数据结构,过滤掉特殊符号,url这些基本需求;同时在实现的过程中每次都要去处理最原始的数据,这就需要考虑到对象的深拷贝问题,目前所采用的方法是通过JSON.parse(JSON.stringify(str))来处理,因为在这个全局搜索的项目中不太会用到函数这些对象。最后通过replace方法来处理这些目标字符串。
截图
代码
wxml:
<view class='homePage'>
<input bindinput="bindKeyInput"></input>
<view wx:for="{{newJson}}" wx:for-item='item' wx:key>
<rich-text nodes="{{item.name}}"></rich-text>
<rich-text nodes="{{item.address}}"></rich-text>
<rich-text nodes="{{item.age}}"></rich-text>
<view wx:if="{{item.aihao}}" wx:for="{{item.aihao}}" wx:for-item='sitem' wx:key>
<rich-text nodes="{{sitem}}"></rich-text>
</view>
</view>
</view>
js:
//index.js
//index.js
const app = getApp()
Page({
data: {
homeUrl: '../index/index',
mineUrl: '../mine/mine',
newFillUrl: '../newFill/newFill',
historyUrl: '../historyData/historyData',
json: [{ name: '你是谁', age: 'awdqww\\k', address: 'auemnkjkifwh{\\efwfheffoewjowef', aihao: ['sdsd', 'sdfsd', 'sdsf'] }, { name: '98797', age: '6544656', address: 'https://www.baidu.com/' }],
newJson: '',
tempText: '',
showShadow: false,
chartNumber: 0,
newStr:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
newJson: this.data.json
})
},
haha: function () {
console.log('haha');
wx.navigateTo({
url: '../mine/mine',
})
},
digui: function (newJson, obj, key) {
var urlReg = new RegExp('(https ?|ftp | file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]')
var that = this;
var reg = that.data.tempText;
if (that.data.tempText == '.' || that.data.tempText == '\\' || that.data.tempText == '\?' || that.data.tempText == '\[' || that.data.tempText == '\]') {
reg = '\\' + that.data.tempText
}
var reg = new RegExp(reg, 'ig');
if (newJson.constructor == Array) {
newJson.forEach(function (item, index) {
if (item.constructor == String && !urlReg.test(item)) {
obj[key].splice(index, 1, item.replace(reg, function (index) {
if (that.data.newStr != ''){
that.setData({
chartNumber: (that.data.chartNumber + 1)
})
}
return "<span style='color:red'>" + that.data.tempText + "</span>"
}))
} else {
that.digui(item, newJson);
}
});
} else if (newJson.constructor == Object) {
var json = {};
for (var key in newJson) {
json[key] = newJson;
that.digui(newJson[key], newJson, key);
}
} else if (newJson.constructor == String && !urlReg.test(newJson)) { // 这里做全局替换
if (key) {
obj[key] = newJson.replace(reg, function () {
if (that.data.newStr != '') {
that.setData({
chartNumber: (that.data.chartNumber + 1)
})
}
return "<span style='color:red'>" + that.data.tempText + "</span>"
})
}
}
},
showBgShadow: function (e) {
this.setData({
showShadow: e.detail.showBgShadow
})
},
bindKeyInput: function (e) {
var regChart = this.data.regChart;
var text = e.detail.value;
var newStr = '';
newStr = text.replace(/[\@\#\$\%\^\&\*\{\}\:\"\L\<\>\?\\\.]/, '')
this.setData({
tempText: newStr,
chartNumber: 0,
newStr: newStr
})
var newJson = JSON.parse(JSON.stringify(this.data.json));
this.digui(newJson);
this.setData({
newJson: newJson
})
}
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。