uniapp@#高亮显示
时间: 2025-03-13 16:12:22 浏览: 60
### 实现 UniApp 中的高亮显示功能
在 UniApp 中实现文本或元素的高亮显示效果可以通过多种方式完成,具体取决于需求场景。以下是基于提供的参考资料和专业知识的一种解决方案。
#### 使用 indexOf 和 substring 方法分割字符串并标记关键词
通过 JavaScript 的 `indexOf` 方法检测目标字符串是否包含特定的关键字,并利用 `substring` 将其拆分为多个部分。对于匹配到的部分可以单独包裹在一个带有样式的标签中以实现高亮效果[^3]。
```javascript
// 假设输入框中的值为 keyword, 而列表项的内容为 item.text
function highlightText(keyword, text) {
const reg = new RegExp('(' + keyword + ')', 'ig');
return text.replace(reg, '<span style="color:red;">$1</span>');
}
```
上述函数接受两个参数:一个是用于搜索的关键词 (`keyword`);另一个是要处理的目标文本串 (`text`)。它返回经过 HTML 处理后的字符串,在其中所有的关键词都被替换成了红色字体表示的形式。
#### 数据绑定与渲染逻辑调整
当数据源更新时重新计算每个项目的展示形式:
```html
<view v-for="(item,index) in list" :key="index">
<rich-text :nodes="highlight(item.text, searchKeyword)"></rich-text>
</view>
<script>
export default {
data() {
return {
list: [], // 列表数据
searchKeyword: '' // 用户输入的查询词
}
},
methods:{
highlight(text, keyword){
if(!keyword || !text.includes(keyword)){
return text;
}else{
let replacedText = text.replace(new RegExp(`(${keyword})`, 'gi'), `<b>$1</b>`);
return replacedText;
}
}
}
};
</script>
```
这里我们定义了一个名为 `highlight` 的方法来负责实际的文字高亮操作。如果当前项目不满足条件,则直接返回原始文字;反之则应用正则表达式进行替换,并用加粗样式标注出来。
注意:由于 Vue 及其衍生框架的安全机制,默认情况下不会解析传入 rich-text 组件内的 html 字符串。因此可能还需要额外配置白名单或者其他安全措施确保最终呈现的效果既美观又可靠。
#### 结合 UEditor 插件增强体验 (可选)
如果有更复杂的需求比如支持多语言代码片段或者更加丰富的编辑器特性,也可以考虑集成百度开发团队维护的UEditor工具集及其附属资源文件夹下的语法着色库[^2]。不过这通常适用于富媒体创作环境而非简单的检索结果显示场合。
---
###
阅读全文
相关推荐


















