要在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>
标签,实现文本高亮效果。