开发环境
编辑器：VsCode
Vue：3.3.4
Sass：1.63.6
TypeScript：5.0.2
Element-Plus：2.3.7
工具类编写
我的工具一般都放在：src/js/tools.js 中
代码如下（具体内容可根据不同业务来调整，核心代码就是最后三行）：
/**
* 关键字标红函数
*
* @param val 原文
* @param searchData 关键字
* @param nullResStr 原文为空返回的内容
*
* @returns 处理后的内容
*/
export const highlightKeywords = (val: any, searchData: any, nullResStr: any) => {
val = String(val);
searchData = String(searchData);
nullResStr = String(nullResStr);
const isEmpty = val === 'null' || val === '';
// 空内容处理
if (isEmpty || searchData === '') {
return isEmpty ? nullResStr : val;
}
// i：不区分大小写，g：全局替换
const regex = new RegExp(searchData, 'gi');
const highlighted = val.replace(regex, '<span style="color: red;">$&</span>');
return highlighted;
};
工具类的使用
1、在页面引入工具类函数，记得要配置@路径解析，没有配置就用相对路径引入
import { highlightKeywords } from '@/js/tools';
2、定义一个方法
showKeyWords(val: any, searchData: any, nullResStr: any) {
return highlightKeywords(val, searchData, nullResStr);
}
在段落中使用
1、定义一个段落内容：text01
鲁滨逊漂流记这本书虽然早已读完了，但至今我仍回味无穷。鲁滨逊漂流记是英国小说家丹尼尔·笛福(1660——1731)于1719年写成的，故事主要讲了一个英国水手鲁滨逊·克鲁索流落到一个无人的荒岛上。在进退无路的情况下，他开始想办法自救:造房子、种庄稼、养牲畜、造木筏……他凭借着自己的双手和聪明才智，花了27年时间，终于把荒岛变成了“世外桃源”。
其中我最敬佩的就是鲁滨逊能在这样渺无人烟的荒岛上生存。因为要想长期生存，没有熟食是肯定不行的。虽然岛上物产丰富，既有可口的水果，也有好吃的野物，但是让我们试想一下，这岛上有快餐店吗?有面包房吗?肯定没有。而鲁滨逊仅靠自己的双手和一些简单的工具，竟做成了美味的食物。这让我不禁想到了现在的有些孩子，他们整天过着饭来张口、衣来伸手的生活，什么也不会做。
这样下去，等到他们长大以后，即使拥有丰富的物质条件，仍无法养活自己。值得一提的是，鲁滨逊不仅具有丰富的生活常识，而且还掌握了一定的生活技能，他在岛上搭建房屋，打磨工具，制作面包……这又让我联想到现今的一些大学生，他们虽然有一肚子的文化知识，却不具备一点点生活技能，有人甚至连鸡蛋要剥了壳吃都不知道。
试想一下，这些人连自己都养活不了，将来怎么肩负起建设祖国的重任?一个没有生活自理能力的人，即使有再多的知识，也是一个废人。所以我们在学习文化知识的同时，别忘了学习一些生活技能，()学会生活自理。只有这样，我们在走上社会后，才能自食其力。
鲁滨逊之所以能在荒岛上独自生活27年，不仅是因为他具有一定生活技能，更重要的是，他有着敢于同大自然抗争的精神和百折不挠的生活态度。鲁滨逊为了在他的洞室里做一个长架子，花费了整整42天的功夫才做成了一块木板。没有适宜的工具，没有助手，鲁滨逊仅靠自己的双手就完成了这项艰巨的“任务”。
靠着超乎常人的耐心和勇气，他又完成了许多其他工作。让我们试想一下，如果鲁滨逊没有顽强的精神和超人的毅力，怎么能在荒岛上生活那么多年?对比现在的有些人，他们遇到了困难，不是努力的克服，而是被困难吓倒，萎靡不振，有的甚至起了轻生的念头。现在看来，这些困难相对于鲁滨逊遇到的，简直是大巫见小巫了。
因此，我们要学习鲁滨逊那种超乎常人的耐心，百折不挠的精神和克服困难的勇气，永不言弃。用乐观向上的态度，去迎接每一次挑战;用坚韧不拔的精神，去战胜每一个困难，只有这样，我们的生活才会更加精彩!我们的未来才会更加辉煌!
2、在页面上使用
<p v-html="showKeyWords(text01, '鲁滨逊', '')"></p>
3、效果图
4、匹配大小写效果图
在表格中使用（Element-Plus表格）
- 1、声明一个数据集合：list
list: [
{
id: 1,
uname: 'user1',
nick: 'nick1',
phone: '1234567890',
qq: '123456789',
wx: 'wxuser1',
path: 'address1'
},
{
id: 2,
uname: 'user2',
nick: 'nick2',
phone: '0987654321',
qq: '987654321',
wx: 'wxuser2',
path: 'address2'
},
{
id: 3,
uname: 'user3',
nick: 'nick3',
phone: '1111111111',
qq: '111111111',
wx: 'wxuser3',
path: 'address3'
},
{
id: 4,
uname: 'user4',
nick: 'nick4',
phone: '2222222222',
qq: '',
wx: 'wxuser4',
path: 'address4'
},
{
id: 5,
uname: 'user5',
nick: 'nick5',
phone: '3333333333',
qq: '333333333',
wx: 'wxuser5',
path: 'address5'
},
{
id: 6,
uname: 'user6',
nick: '',
phone: '4444444444',
qq: '',
wx: 'wxuser6',
path: 'address6'
},
{
id: 7,
uname: 'user7',
nick: 'nick7',
phone: '5555555555',
qq: '555555555',
wx: 'wxuser7',
path: 'address7'
},
{
id: 8,
uname: 'user8',
nick: 'nick8',
phone: '',
qq: '666666666',
wx: 'wxuser8',
path: 'address8'
},
{
id: 9,
uname: 'user9',
nick: 'nick9',
phone: '7777777777',
qq: '777777777',
wx: 'wxuser9',
path: 'address9'
},
{
id: 10,
uname: 'user10',
nick: 'nick10',
phone: '8888888888',
qq: '888888888',
wx: 'wxuser10',
path: 'address10'
}
];
2、声明一个查询字符串变量：listSeachStr
listSeachStr: ''
3、在页面上使用表格
<el-table :data="list">
<el-table-column label="编号">
<template #default="scope">
<span v-html="showKeyWords(scope.row.id, listSeachStr, '暂无')"></span>
</template>
</el-table-column>
<el-table-column label="用户名">
<template #default="scope">
<span v-html="showKeyWords(scope.row.uname, listSeachStr, '暂无')"></span>
</template>
</el-table-column>
<el-table-column label="昵称">
<template #default="scope">
<span v-html="showKeyWords(scope.row.nick, listSeachStr, '暂无')"></span>
</template>
</el-table-column>
<el-table-column label="手机">
<template #default="scope">
<span v-html="showKeyWords(scope.row.phone, listSeachStr, '暂无')"></span>
</template>
</el-table-column>
<el-table-column label="QQ">
<template #default="scope">
<span v-html="showKeyWords(scope.row.qq, listSeachStr, '暂无')"></span>
</template>
</el-table-column>
<el-table-column label="微信号">
<template #default="scope">
<span v-html="showKeyWords(scope.row.wx, listSeachStr, '暂无')"></span>
</template>
</el-table-column>
<el-table-column label="地址">
<template #default="scope">
<span v-html="showKeyWords(scope.row.path, listSeachStr, '暂无')"></span>
</template>
</el-table-column>
</el-table>
4、在页面上添加一个输入框
<el-input v-model="listSeachStr" placeholder="输入关键字搜索..."></el-input>
5、效果展示
在输入框输入 关键字，符合条件 的表格内容就会 标红
若数据字段为空，则会显示 “暂无”，这也是我在工具类添加 nullResStr 字段的原因
根据不同业务需求，函数内容是千变万化的，唯有掌握核心，才能应对各种需求
结语
前端的jym，有需要接口的可以找我开发，开源公开的API（公益）
想看我发表什么内容，可以提出来，在下方留言哦
工具类可能存在不足，若有更好的方法和建议可以告诉我
