javascript - 搜索结果的粗体子字符串取决于搜索查询

Question

我正在尝试根据用户的输入但使用原始拼写来实现搜索结果的粗体部分。 我想避免点、多个空格、破折号，并使其不区分大小写。

例如，我有一个简单的搜索结果:Al。贾娜。

我正在尝试将搜索的部分加粗，所以:

当用户输入 al 时，我想显示 -> Al。贾娜

Al -> Al。贾娜

AL -> Al。贾娜

al jana -> Al。贾娜

jana -> 阿尔。 贾娜

铝。 Jana -> Al。贾娜

或者如果我们有一个搜索结果 Al。 Jana Something - More 并且用户键入 something more 它应该返回:Al。 Jana Something - More。

到目前为止我写了这段代码:

function modify(result, query) {
    let re = new RegExp(query, 'ig');
    return result.replace(/- /g, "").replace(/\./g, "").replace(re, '<b>' + query + '</b>'); //replacing "- " as dash is always surrounded with spaces so it trims one unnecessary space; is there a better way to make "inside-trim"?
}

let bolded = modify("Al. Jana", "al jana");
console.log(bolded);

fiddle :https://jsfiddle.net/ayb8Lj4r/

但这不是我想要实现的。也许我应该大量使用 .indexOf？我不确定。

Answer 1

您需要在搜索查询的所有单个字符之间添加 [-\s.]* 模式。这将允许任意数量的空格，- 或 . 字符之间的字符。如果你想允许任何非单词字符，你可以使用 \W* 代替。

此外，您应该转义所有特殊字符，否则，如果查询包含 ( 或 + 之类的字符，结果将不会如预期。

这是固定的片段:

function modify(result, query) {
  var re = new RegExp(query.split("").map(function(x) { 
      return x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); 
  }).join("[-\\s.]*"), 'ig');
  return result.replace(re, '<b>$&</b>');
}

var bolded = modify("Al. Jana Something - More", "al jana");
document.querySelector("#result").innerHTML = bolded;

<div id="result"/>