Javascript 根据searchquery，搜索结果的粗体子字符串

我试图实现一个粗体部分的搜索结果，这取决于用户的输入，但与原来的拼写。 我希望避免点、多个空格、破折号，并使其不区分大小写

例如，我有一个简单的搜索结果：

Al.Jana

我正在尝试大胆地搜索部分，因此：

当用户键入

al

时，我想显示->al。雅娜

Al

->Al。雅娜

AL

->AL。雅娜

al.jana

->al.jana

jana

->Al.jana

Al.Jana

->Al.Jana

或者，如果我们有一个搜索结果

Al.Jana Something-More

，用户键入

Something

，它应该返回：Al.JanaSomething-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);

函数修改（结果、查询）{
设re=newregexp（查询'ig'）；
返回结果。replace（//-/g，“”）。replace（//\/g，“”）。replace（re），+query+”；//replacement“-”因为破折号总是被空格包围，所以它会修剪一个不必要的空间；是否有更好的方法进行“内部修剪”？
}
让黑体=修改（“Al.Jana”，“Al.Jana”）；
console.log（粗体）；

小提琴：

但这不是我想要实现的。也许我应该大量使用

.indexOf

？我不确定。

回答 要获得所需的结果，可以利用捕获组和变量

let re = new RegExp('(' + query + ')', 'ig');

这允许您在

replace

函数的第二个参数中使用

$1

，以按大小写在原始字符串中的方式指向匹配的文本

return result.replace(/- /g, "")
   .replace(/\./g, "")
   .replace(re, '<b>$1</b>');

并删除您的经期替换

       .replace(/\./g, "")

由于我们也需要连字符，根据您的评论，我们也可以删除该行

      .replace(/- /g, "")

我们只剩下：

function modify(result, query) {
  query = query.replace(/(al) (jana)/ig, "$1. $2");
    let re = new RegExp('(' + query + ')', 'ig');
    return result.replace(re, '<b>$1</b>');
}

函数修改（结果、查询）{
查询=查询。替换（/（al）（jana）/ig，“$1.$2”）；
设re=newregexp（“（“+query+”）”，“ig”）；
返回结果。替换（重“$1”）；
}

---

例子

函数修改（结果、查询）{
查询=查询。替换（/（al）（jana）/ig，“$1.$2”）；
设re=newregexp（“（“+query+”）”，“ig”）；
返回结果。替换（重“$1”）；
}
让黑体=修改（“Al.Jana某物-更多”，“Al-Jana”）；
document.querySelector（“#result”）.innerHTML=粗体
您需要在搜索查询的所有单个字符之间添加
[-\s.]*
模式。这将允许字符之间有任意数量的空格、
-
或
字符。如果要允许任何非单词字符，可以使用
\W*

此外，您应该转义所有特殊字符，否则，如果查询包含类似
（
或
+
）的字符，则结果不会如预期的那样

以下是固定代码段：


函数修改（结果、查询）{
var re=new RegExp（query.split（“”）.map（函数（x）{
返回x.replace（/[-\/\^$*+.（）\[\]{}]/g，\\$&'）；
}).加入（“[-\\s.]*”，“ig”）；
返回结果。替换（重新“$&”）；
}
var bolded=modify（“Al.Jana Something-More”、“Al.Jana”）；
document.querySelector（“#result”）.innerHTML=bolded；
如果您的查询是
al-jana
并且文本是
al.jana Something-More
，我知道您想获得
al.jana Something-More
，对吧？@WiktorStribiżew right为什么要删除代码中的句点和连字符？当搜索结果是
al.jana Something-More
并且查询是
Something时thing more
我希望它返回
Al.Jana Something-more
。使用Yay！它工作！但是你在括号中放置了特定的单词，并且在
$1.$2
的特定位置添加了点。如果
query
参数不同怎么办？如何使它对每个带有点和破折号的
查询工作？@Marcin你是什么意思？如果你想让其他短语添加标点符号，你需要对它们进行编程，否则它将不知道标点符号放在哪里。
function modify(result, query) {
  query = query.replace(/(al) (jana)/ig, "$1. $2");
    let re = new RegExp('(' + query + ')', 'ig');
    return result.replace(re, '<b>$1</b>');
}