小程序文字高亮

最近实现一个城市级联选择的时候用到了高亮，这里就总结回顾下。

web 上做法

可以通过正则表达式/(高亮的文字)/来实现

function highlight(str, sep, color) {
  const reg = new RegExp(`\(${sep}\)`, "g");
  return str.replace(reg, `<i style="color:${color};">$1</i>`);
}
highlight("安徽省合肥市", "安徽", "reg");
// <i style="color:reg;">安徽</i>省合肥市

这里实现比较简单，稍微注意一下replaceapi 即可，它还可以接收一个函数作为参数，具体内容这里不做讲解了只简单实现一下。

小程序做法

不同于 web，因为小程序无法手动管理 dom 样式，所以思路是将高亮文字和普通文字区分开来，例如：

var str = "安徽省合肥市蜀山区";
// 如果高亮合肥市，那么我们把他转化为下面这种形式的数组
["安徽省", "合肥市", "蜀山区"];

将普通文字和高亮文字通过数组的形式区分开来，之后再通过<text>标签将转换后的数组for循环，每次循环的结果与高亮文字对比，如果符合就添加高亮样式。

<view>
  <text
    style="{{item === keyWord ? 'color:' + color + ';' : ''}}"
    wx:for="{{arr}}"
    wx:key="item"
  >
    {{item}}
  </text>
</view>

整体的思路就是这样，下面说一下实现的细节。

怎么将一段文字转化为上面数组的形式其实这块要分为两步，将文字转化为数组我们可以用split的方法，之后通过一个变异的join将他们拼成数组。

function join(array, str) {
  const arr = [];
  const len = array.length;
  for (let i = 0; i < len - 1; i++) {
    const value = array[i];
    if (!value) {
      arr.push(str);
    } else {
      arr.push(value, str);
    }
  }
  if (array[len - 1]) {
    arr.push(array[len - 1]);
  }
  return arr;
}

把上面的wxml代码片段和join相关组合一起就可以实现一个文字高亮的效果了。

小程序文字高亮

web 上做法

小程序做法

最后