taro 小程序react 搜索高亮关键字

 jsx代码

    // 高亮项
    const HighlightItem = ({ tip, value }): any => {
      const key = `${tip}` || ''
      const arr = `${value || ''}`.replace(new RegExp(key, 'g'), `%%${key}%%`).split('%%');
      return arr.map((v, i) => {
        return <Text className={classnames({ 'hight-light': v === key })} key={i}>{v}</Text>
      })
    }

 css代码

  $base_green:#06B385;
  .hight-light{
    color: $base_green;
  }

 render 代码

<HighlightItem value={this.state.name} tip={this.state.keyword}></HighlightItem>