如何在JavaScript中将渲染文本中的指定关键词设置为粗体样式？

你可以在渲染文本到页面前，对currentQuestion.q做关键词替换，把目标词汇包裹上粗体标签即可，具体修改方式如下：

实现步骤 #

• 第一步：定义需要高亮加粗的关键词数组
• 第二步：用正则匹配所有符合要求的独立词汇，替换为带<strong>标签的格式
• 第三步：把处理后的内容赋值给questionText.innerHTML

完整修改后的代码 #

const questionIndex = availableQuestion[arrayReady[currentPage-1]];
currentQuestion = questionIndex;
// 定义需要加粗的词汇列表
const boldWords = ['not', 'except'];
// 构造正则：\b匹配单词边界，g全局匹配，i不区分大小写
const reg = new RegExp(`\\b(${boldWords.join('|')})\\b`, 'gi');
// 替换内容
const processedQ = currentQuestion.q.replace(reg, '<strong>$1</strong>');
// 渲染处理后的内容
questionText.innerHTML = processedQ;

注意说明 #

• 如果你需要严格区分大小写匹配，把正则末尾的i参数去掉即可
• 如果你要加粗的词汇包含.、*、?这类正则特殊字符，需要先对词汇做转义处理，避免正则匹配出错
• 这里用\b匹配单词边界，是为了避免误匹配到包含目标字符的其他单词，比如nothing里的not就不会被单独加粗

内容的提问来源于stack exchange，提问作者Andi Fathul Mukminin