要在UniApp的微信小程序中高亮关键词”培训考试”,你可以使用内联样式或动态类名来改变文本的样式。

以下是修改后的代码示例:htmlCopy

<view class="flex-col">
  <view class="lesson-title flex-center">
    <view v-html="highlightKeyword(lesson.title)"></view>
  </view>
  <view class="lesson-item u-m-b-20"><text>主讲:{{ lesson.teacher }}</text></view>
  <view class="lesson-item"><u-icon name="eye" color="#999"></u-icon>
    <text>{{ lesson.attendees }}人</text>
  </view>
</view>

javascriptCopy

highlightKeyword(text) {
  if (this.value && text) {
    const regex = new RegExp(this.value, 'gi');
    return text.replace(regex, '<span class="highlight">$&</span>');
  } else {
    return text;
  }
}

cssCopy

.highlight {
  color: red; /* 根据需要设置高亮样式 */
}

在上述代码中,我们将<view>标签内的<text>标签改为使用<view>标签来包裹要高亮的文本。然后,使用v-html指令将经过高亮处理的HTML字符串渲染到内部的<view>标签中。

在CSS样式中,我们定义了.highlight样式类,将高亮文本的颜色设置为红色。你可以根据需要自定义高亮的样式。

通过上述代码,当highlightKeyword方法被调用时,会将匹配到的关键词”培训考试”替换为带有.highlight样式类的<span>标签,实现文本高亮效果。

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注