时间戳

首页 > 解决方案 > 使用粗体突出显示文本字符串中的匹配关键字

javascript - 使用粗体突出显示文本字符串中的匹配关键字

问题描述

我正在创建函数，我将在其中传递字符串和特定文本。特定文本在整个字符串中应为粗体。我想实现这一点，但无法做到这一点。

输入字符串：-“Hi Hello boy Hello Shyam Hello”

文字：-你好。

输出：- Hello 单词在 String 中看起来应该是粗体的。

标签： javascriptreactjs

解决方案

我会这样做：

function escapeRegExp(text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\\s]/g, '\\$&');
}

function boldMe(input, text){
    const regExString = escapeRegExp(text)
    const regex = new RegExp(regExString, 'g');
    let output = input.replace(regex, `<b>${text}</b>`);
    console.log(output);
    return output;
}

var myDev = document.getElementById('myDiv');
myDev.innerHTML = boldMe(myDev.innerHTML,'Hello');
<div id="myDiv">Hi Hello boy Hello Shyam Hello</div>

编辑：

正如@Peter Seliger在评论中指出的那样，由于使用正则表达式，因此必须在使用搜索字符串之前对其进行转义。我使用了这种方法，但可以随意使用任何其他转义实现

推荐阅读