javascript - 在字符串之间使用标签 <mark>

Question

我有一个变量searchString与包含字符串。 我必须列出 titles我想要的过滤器 searchString 。 我尝试使用标签 <mark>用于突出显示一段标题，但目前还无法做到。

我尝试实现一个具有 2 个参数的函数并返回一个用于渲染的 jsx。

const markString = (title, searchString) => {
  var regex = new RegExp(searchString, 'i');
  const newString = string.replace(regex, '<mark>Banana</mark>');
  console.log(newString);
  return (newString);
};

情况。 searchString = ab title = abracadabra

我希望该函数返回类似的内容。 <mark>ab</mark>racad<mark>ab</mark>ra

我需要一个带有字符串和世界之间的标签标记的jsx。

有人可以帮助我吗？

Answer 1

使用split()和join()

您可以split()按标题和 join()通过额外<mark>标签。

let str = 'abracadabra';

function markString(title, searchString){
  return searchString.split(title).join(`<mark>${title}</mark>`);
}
console.log(markString('ab',str))

使用正则表达式

let str = 'abracadabra';

function markString(title, searchString){
  return searchString.replace(new RegExp(title,"g"),`<mark>${title}</mark>`)
}
console.log(markString('ab',str))