如何在javascript中的字符串中添加关键字前后的html标记？

Question

假设我有这样一个字符串，我希望在字符串中的特定关键字之前和后面附加html标记。

let name = "George William";

let keyword = "geo";

在追加html标签后，我想得到这样的结果，

<strong>Geo</strong>rge William

我试过这样的方法，

name.replace(new RegExp(keyword, 'gi'), "<strong>"+keyword+"</strong>");

但结果是这样的，

<strong>geo</strong>rge William

我如何才能得到结果与确切的“案例”，在原来的名字？

Answer 1

可以使用$&引用结果中匹配的子字符串。

​

let name = 'George William';
let keyword = 'geo';

console.log(name.replace(new RegExp(keyword, 'gi'), '<strong>$&</strong>'));

​

Answer 2

这不是我编写过的最漂亮的代码，但它不使用正则表达式，它确实可以忽略这种情况，同时使它成为一个可重用的函数，不需要具体地绑定到<strong>标记。

​

let name = "George William";

let keyword = "geo";

const newHtml = (str, key, tagName) => {
  return str.toLowerCase()
    .split(key.toLowerCase())
    .map((val) => {
      if (val !== '') {
        return val;
      }
      else {
        let idx = str.toLowerCase().indexOf(key.toLowerCase());
        return `<${tagName}>${str.split('').slice(idx, key.length).join('')}</${tagName}>`;
      }
    })
    .join('');
};
  
console.log(newHtml(name, keyword, 'strong'));

​