在web网页中实现文本高亮，小程序中存在诸多限制，例如无法操作DOM，小程序组件与HTML标签不互通，无法直接渲染HTML等问题。

方案一：要实现替换文本内容需要借助插件将文本转换为HTML，将处理好的HTML内容使用rich-text组件渲染。

微信rich-text支持普通HTML字符串和HTML Node节点对象两种格式。

优点：直接渲染HTML，展示较为灵活。

缺点：处理成本较高，需要将文本转换为HTML字符串或HTML节点。兼容性差，由于各个渠道的小程序API存在差异，此方案无法使用微信以外的小程序平台。

—js

Page({
  data: {
      htmlString = "<div>1234</div>",
      nodes: [{
        name: 'div',
        attrs: {
          class: 'div_class',
          style: 'line-height: 60px; color: red;'
        },
        children: [{
          type: 'text',
          text: 'You never know what you're gonna get.'
        }]
      }]
    }
  })

—wxml：

<rich-text nodes="{{htmlString}}"></rich-text>
<rich-text nodes="{{nodes}}"></rich-text>

方案二：将需要高亮的文本处理为数据对象，标识需要高亮的部分，在wxml循环渲染数据对象，将高亮数据渲染到高亮容器中。

优点：使用原始微信标签渲染，无需转换为HTML。

缺点：需要按需处理需要渲染的普通文本。

// js部分
const str = "这是一段需要高亮的文本！";
// 将文本处理为如下格式：
const strObj = [
  {text:"这是一段需要",highLight:false},
  {text:"高亮",highLight:true},
  {text:"的文本！",highLight:false},
]

// wxml部分
<view>
  <block wx:for="{{strObj}}" wx:for-item="item" wx:for-index="index" wx:key="index">
    <text wx:if="{{item.highLight}}" class="highLight-color">{{item.text}}</text>
    <text wx:else>{{item.text}}</text>
  </block>
</view>