日复一日,反反复复,终于完成了小程序的项目.。这篇文章我就对自己的项目中用到的array方法结合具体的功能进行综合的分析
搜索区高亮的显示
使用方法Str.replace()+正则+Array.map()
正当项目即将完成之际,恰逢项目经路来了一句,搜索框我觉得高亮显示会更好一些,把这个需求弄一下.恰同学少面年,跟项目经理争执了半天也没有个结果.最后我不要你觉得,我要我觉得,惨败收场.此时心里面不知道多少个???what?.没办法,硬着头皮也得来呀.简单分析后,其实原理并不难
原理:字符串替换
基本想法就是字符串替换。现在的问题简化成了:如何把一段字符串中的指定的内容替换成另一个内容:
var str = "abcdefgbefab"
// 目标: 把str中的b全部换成<span>b</span>
// 普通字符串替换:str.replace(目标字符串,要替换的字符串),它的返回值是替换之后的字符串,注意它不会修改原字符串。
// 它的问题是,它只能替换一次。如上,我们有两个b需要替换,那又该怎么办呢?
// - 循环
// - 正则
此时到这里以后,我觉得可以使用正则来进行解决
<script>
// 实现正则替换
var str ="abdAd";
var keywork = "ab"
// 目标是:
// 把所有的a替换成<span style="color:red">a</span>
// 请开始你的表演
// replace如果不用正则,只能换一次
// var str1 = str.replace("a",'<span style="color:red">a</span>')
// replace(正则,函数)
// /a/gi :正则
// g表明要做全局匹配。只匹配出所有的子串。
// i表明匹配不分大小写。
// new RegExp('a','gi'); 用构造器的方式来创建正则表达式就可以把
// 第一个参数写成变量
// 如果在字符串用正则匹配到了内容,则会去执行函数。
// 函数的执行细节是:
// - 参数obj是匹配到的内容
// - 返回值是替换之后的结果
var str1 = str.replace(new RegExp(keywork,'gi'),function(obj){
console.log(obj)
return '<span style="color:red">'+obj+'</span>'
})
console.log(str1); // '<span style="color:red">a</span>bAdd'
</script>
在计算属性中定义
this.searchSuggestions
是搜索是获取的数据是一个数组
<script>
....
computed: {
// 补充一个计算属性对searchSuggestions中的数据做高亮
cSearchSuggestions () {
// 创建正则表达式
const reg = new RegExp(this.keyword, 'gi')
return this.searchSuggestions.map(str => {
// 原来是:str
// 替换成:对关键字进行高亮之后的字符串
const str1 = str.replace(reg, function (obj) {
return `<span style="color:red">${
obj}</span>`
})
return str1
})
}
},
}
</script>
使用array.map返回的就是一个数组.所以此时只需要对当前的数组进行遍历就可以了
但是问题又出现了
我们替换的的是html,那么如何渲染 到小程序上哪?
使用小程序的 rich-text
组件 nodes后面跟的是需要渲染的数据
<rich-text nodes