Javascript 将多个子字符串与字符串匹配

我有一个应用程序，其中用户键入文本，然后将该文本发送到服务器，并返回包含该文本的单词数组

但正如你所看到的，当有超过1场比赛时，问题就开始了。以下是我当前的代码：

state.input !== '' && vocabularyItems && (vocabularyItems.map((vocabularyItem, index) => {
      const regex = new RegExp(input, 'gi');
      const results = vocabularyItem.matchAll(regex);

      const tmp = [];
      console.log(vocabularyItem);
      for (const match of results) {
        console.log(match);
        let currentLoop = vocabularyItem.slice(0, match.index);

        currentLoop += '<strong className="tt-highlight">';

        currentLoop += vocabularyItem.slice(match.index, match.index + input.length);

        currentLoop += '</strong>';

        currentLoop += vocabularyItem.slice(match.index + input.length, vocabularyItem.length);

        tmp.push(currentLoop);
      }
      console.table(tmp);

      return (
        <div
          id={index}
          className={`override-strong tt-suggestion tt-selectable ${cursor === index && 'tt-cursor'}`}
          onMouseDown={handleClick}
          key={index}
          dangerouslySetInnerHTML={{ __html: tmp }}
        />
      );
    }))

state.input！=''&&vocabularyItems&&（vocabularyItems.map）（（vocabularyItem，索引）=>{
const regex=new RegExp（输入'gi'）；
const results=vocabularyItem.matchAll（regex）；
常数tmp=[]；
console.log（词汇项）；
for（结果的常量匹配）{
控制台日志（匹配）；
让currentLoop=vocabularyItem.slice（0，match.index）；
currentLoop+='；
currentLoop+=vocabularyItem.slice（match.index，match.index+input.length）；
currentLoop+=''；
currentLoop+=vocabularyItem.slice（match.index+input.length，vocabularyItem.length）；
tmp.push（电流环）；
}
控制台.工作台（tmp）；
返回(
);
}))

下面是一些HTML代码示例

1.
<strong className="tt-highlight">En</strong>kelkind

2.
<strong className="tt-highlight">En</strong>gagement
Engagem<strong className="tt-highlight">en</strong>t

1。
En
2.
Engagement
约定

如您所见，它在只有一个匹配项时工作，但在存在多个匹配项时复制单词。我怎么能得到这样的结果

<strong>en</strong>gagem<strong>en</strong>t?

engagement？

engagement

---

我忘了补充一点，我需要保留这个案例

这里有一个方法：

const list=[
"完",，
“英格兰”，
“订婚”
]
const boldify=（搜索）=>{
返回（字符串）=>
替换（新的RegExp（搜索“gi”），“$&”）
}
document.body.innerHTML=list.map（boldify（'en'））.join（“
”）

这里有一种方法可以使用：

const list=[
"完",，
“英格兰”，
“订婚”
]
const boldify=（搜索）=>{
返回（字符串）=>
替换（新的RegExp（搜索“gi”），“$&”）
}
document.body.innerHTML=list.map（boldify（'en'））.join（“
”）

首先，我建议您使用，比如：

const results = vocabularyItems.filter(word => word.toLowerCase().includes(input.toLowerCase()))

用于不区分大小写的词汇表查找

接下来，我将以一种不同的方式强调这场比赛。我将建议的选项分为两部分（匹配的搜索输入和不匹配的输入），然后分别设置它们的样式：

const parts = suggestion.split(new RegExp(`(?=${match})|(?<=${match})`, 'gi'))
...
parts.map((part,key) => {
          const style = part.toLowerCase() == match.toLowerCase() ? 'bold' : 'normal'
          return <span style={{fontWeight:style}} {...{key}}>{part}</span>
        })

const parts=suggestion.split（新的RegExp（`（？=${match}）|（{
const style=part.toLowerCase（）==match.toLowerCase（）？“粗体”：“普通”
返回{part}
})

我认为假设您构建了自动完成搜索输入是足够安全的，因此您可能会发现下面的快速演示（不包括所有样式）：

//依赖项
const{render}=ReactDOM，
{useState}=React
//词汇表
const词汇=[“订婚”、“宾利”、“英语”、“七”、“订婚”]
//建议的选项组件
const SuggestedOption=（{suggestion，match}）=>{
const parts=suggestion.split（新的RegExp（`（？=${match}）|（{
const style=part.toLowerCase（）==match.toLowerCase（）？“粗体”：“普通”
返回{part}
})
}
)
}
//自动完成组件
常量搜索栏=（）=>{
const[suggestions，setSuggestions]=useState（[]），和，
[inputValue，setInputValue]=useState（“”），
onInput=输入=>{
设置输入值（输入）
设置建议（词汇表.filter（word=>input.length&&word.toLowerCase（）.includes（input.toLowerCase（）））
}
返回(
onInput（e.target.value）}/>
{
建议.map（（建议，键）=>）
}
)
}
渲染(
,
document.getElementById（'root'））
)

---

首先，我建议您使用，比如：

const results = vocabularyItems.filter(word => word.toLowerCase().includes(input.toLowerCase()))

用于不区分大小写的词汇表查找

接下来，我将以一种不同的方式突出显示匹配项。我将建议的选项分为两部分（匹配的搜索输入和不匹配的输入），然后分别设置它们的样式：

const parts = suggestion.split(new RegExp(`(?=${match})|(?<=${match})`, 'gi'))
...
parts.map((part,key) => {
          const style = part.toLowerCase() == match.toLowerCase() ? 'bold' : 'normal'
          return <span style={{fontWeight:style}} {...{key}}>{part}</span>
        })

const parts=suggestion.split（新的RegExp（`（？=${match}）|（{
const style=part.toLowerCase（）==match.toLowerCase（）？“粗体”：“普通”
返回{part}
})

我认为假设您构建了自动完成搜索输入是足够安全的，因此您可能会发现下面的快速演示（不包括所有样式）：

//依赖项
const{render}=ReactDOM，
{useState}=React
//词汇表
const词汇=[“订婚”、“宾利”、“英语”、“七”、“订婚”]
//建议的选项组件
const SuggestedOption=（{suggestion，match}）=>{
const parts=suggestion.split（新的RegExp（`（？=${match}）|（{
const style=part.toLowerCase（）==match.toLowerCase（）？“粗体”：“普通”
返回{part}
})
}
)
}
//自动完成组件
常量搜索栏=（）=>{
const[suggestions，setSuggestions]=useState（[]），和，
[inputValue，setInputValue]=useState（“”），
onInput=输入=>{
设置输入值（输入）
设置建议（词汇表.filter（word=>input.length&&word.toLowerCase（）.includes（input.toLowerCase（）））
}
返回(
onInput（e.target.value）}/>
{
建议.map（（建议，键）=>）
}
)
}
渲染(
,
document.getElementById（'root'））
)

---

编辑-耶夫根的答案比这个好得多

如果我正确理解您的需求，一个简单的循环可以实现这一点：

var array = ["end","engagement","Engagement","england","enough","not this","or this"];

function filterArray(array, id) {
    var returnArray = [];
  for (var i = 0; i < array.length; i++) {
    value = array[i];
    if (value.includes(id)) {
        returnArray.push(value);
    }
    }
    return returnArray;
}

var filteredArray = filterArray(array,"en");
console.log(filteredArray);

var数组=[“结束”、“约定”、“约定”、“英格兰”、“足够”、“不是这个”、“或这个”]；
函数过滤器阵列（阵列，id）{
var returnArray=[]；
对于（var i=0；i