使用 JavaScript 来实现对返回数据中带有关键词的文本加粗的效果(筛选字母的时候如何过滤标签中的关键字)

该文章介绍了如何利用JavaScript获取HTML元素的文本内容,通过正则表达式匹配关键词,并对匹配到的内容进行加粗处理。方法包括使用innerText或textContent属性,以及替换匹配项为HTML的<b>标签来实现文本高亮。
摘要由CSDN通过智能技术生成

首先,使用 JavaScript 获取该元素的文本内容,并用正则表达式匹配出所有带有关键词的部分

const keyword = '关键词';
const textElement = document.getElementById('my-text');
const text = textElement.innerText;
const regex = new RegExp(keyword, 'g');
const matches = text.match(regex);

接下来,对匹配到的文本部分进行加粗处理,可以使用 HTML 的 <b> 标签

const boldText = text.replace(regex, '<b>正则表达式所匹配到的部分</b>');

将加粗后的文本重新赋值给元素的 innerHTML 属性,即可实现加粗效果:

textElement.innerHTML = boldText;
const keyword = '关键词';
const textElement = document.getElementById('my-text');
const text = textElement.innerText;
const regex = new RegExp(keyword, 'g');
const matches = text.match(regex);
const boldText = text.replace(regex, '<b>$&</b>');
textElement.innerHTML = boldText;

可以使用 JavaScript 的 querySelector 方法来获取包含数据的元素,然后使用 innerText 属性来获取文本内容

const dataElement = document.querySelector('#my-data');
const text = dataElement.innerText;

使用 innerText 属性来获取文本内容有一个缺点,它会忽略一些空格和换行符。如果你需要保留这些空格和换行符,可以使用 textContent 属性来获取文本内容

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值