Question

我有这样的字符串“您好，我正在寻找/＃担任老师＃/的工作”。 /＃----＃/中的所有内容都必须突出显示。

这是我在做什么：

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;
}

Answer 2

您可以使用正则表达式dbutils.fs.rm("dbfs:/user/hive/warehouse/schema.db/XXXXX", true)将\/#(.*)#\/中的所有内容都移至捕获组，并用/# #/包装器将其replace包裹起来。

<span>

function highlightMessage(message) {
  if (/\/#.*#\//g.test(message)) {
    document.body.innerHTML += message.replace(/\/#(.*)#\//g, `<span class='red'>$1</span>`)
  }
}

highlightMessage("Hello , I'm looking for /# job as a teacher #/")

.red { color: red }

（出于演示目的，使用<body></body>代替class）

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

2 个答案: