首先,使用 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
属性来获取文本内容