项目(小程序)中数组方法的使用

日复一日,反反复复,终于完成了小程序的项目.。这篇文章我就对自己的项目中用到的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