javascript - 如何突出显示字符串中的文本？

Question

我有这样的字符串 "Hello , I'm looking for/# job as a teacher #/"。/# ----#/中的所有内容都必须突出显示。

这是我在做什么:

highlightMessage(message) {
    if (message.match(/\/#\s*|\s*#\//g)) {
      console.log(message.replace(/\/#\s*|\s*#\//g, `<span className='yellow'>$1</span>`))
    }
  }

但我的输出是:

Hello , I'm looking for <span className='yellow'>$1</span>job as a teacher<span className='yellow'>$1</span>

我哪里做错了？

Answer 1

使用 (.*?) 创建一个组，该组在散列之间非贪婪地匹配任何内容，然后将箭头函数作为第二个参数传递以访问匹配的组并返回值以替换它和。可以在此箭头函数的第二个参数中访问该组:

function highlight(message) {
  return message.replace(/\/#\s*(.*?)\s*#\//g,
    (_, g) => `<span className='yellow'>${g}</span>`);
}

如果需要，您甚至可以将替换函数作为参数传递以自定义替换。

这是一个在同一个字符串中有多个替换的例子:

function highlight(message, replacer = s => `<span class="bold">${s}</span>`) {
  return message.replace(/\/#\s*(.*?)\s*#\//g, (_, g) => replacer(g));
}
  
document.body.innerHTML += highlight("Hello , /#I'm#/ looking for /# job as a teacher #/");
document.body.innerHTML += highlight("<br>Nothing to replace here");
document.body.innerHTML += highlight("<br>You can pass a custom /#replacer function #/ too", s => '😀' + s.toUpperCase() + '😀');

.bold {
  font-weight: bold;
  font-size: 20px;
}