Javascript 实时设置列表项上文本的部分样式以匹配用户输入

Meteor客户端代码通过模板

keyup

事件将用户的实时输入输入输入到输入框中

页面上有列表项，每个列表项中都有文本。我需要对任何列表项中与用户键入内容匹配的文本部分应用样式。
我的尝试是根本不应用任何样式

怎样才能做到呢？谢谢

'keyup .check-filter': function(event) {
  showMatches(event.target.value);
}

showMatches: (userInput) => {
  if (userInput.length > 3) {
     //this is not doing the job for me.
    $('li').html($('li').html().replace('/' + userInput + '/gi', '<span class="myCSS">' + $1 + '< /span>')); 
  }
}

“keyup.check过滤器”：函数（事件）{
showMatches（事件、目标、值）；
}
showMatches：（用户输入）=>{
如果（userInput.length>3）{
//这不是为我做的工作。
$（'li'）.html（$（'li'）.html（）.replace（'/'+userInput+'/gi'，'+$1+''）；
}
}

已更新

对于需要使用

RegExp

的变量，您的函数还将在每个字符组周围添加一个

span

，这将使替换从第五个字母开始时失败，因此您还需要清除该部分，删除字符时未提及该部分

//全局、特定于应用程序的变量
var myApp={
用户输入：{
第一次：是的，
最后一个值：“
}
};
document.querySelector（'input'）。addEventListener（'input'，函数（e）{
var userInput=e.target.value；
if（userInput.length>3 | |！myApp.userInput.firstTime）{
如果（！myApp.userInput.firstTime）{
var re=新的RegExp（“”+
myApp.userInput.lastValue+
“gi”）；
$（“li”）。每个功能（索引）{
$（this.html（$（this.html（）.replace（re，myApp.userInput.lastValue））；
});
}
myApp.userInput.firstTime=false；
var re=newregexp（userInput，'gi'）；
$（“li”）。每个功能（索引）{
$（this.html（$（this.html（）.replace（re），+userInput+''）；
});
}  
myApp.userInput.lastValue=userInput；
})

.myCSS{
颜色：红色
}

你好，这里有两个或更多的单词重复
这也有两个或更多的单词，但却是一个完全不同的句子

测试输入：

已更新

对于需要使用

RegExp

的变量，您的函数还将在每个字符组周围添加一个

span

，这将使替换从第五个字母开始时失败，因此您还需要清除该部分，删除字符时未提及该部分

//全局、特定于应用程序的变量
var myApp={
用户输入：{
第一次：是的，
最后一个值：“
}
};
document.querySelector（'input'）。addEventListener（'input'，函数（e）{
var userInput=e.target.value；
if（userInput.length>3 | |！myApp.userInput.firstTime）{
如果（！myApp.userInput.firstTime）{
var re=新的RegExp（“”+
myApp.userInput.lastValue+
“gi”）；
$（“li”）。每个功能（索引）{
$（this.html（$（this.html（）.replace（re，myApp.userInput.lastValue））；
});
}
myApp.userInput.firstTime=false；
var re=newregexp（userInput，'gi'）；
$（“li”）。每个功能（索引）{
$（this.html（$（this.html（）.replace（re），+userInput+''）；
});
}  
myApp.userInput.lastValue=userInput；
})

.myCSS{
颜色：红色
}

你好，这里有两个或更多的单词重复
这也有两个或更多的单词，但却是一个完全不同的句子

测试输入：

@LGSon您能提供一个用于测试的输入框吗？THX将很快更新为that@LGSon请在每个列表项中使用不同的字符串。字符串必须保持原样，但需要设置用户输入的样式。thx@LGSon请包含多个列表项，因为每个列表项都必须保留其原始文本。@LGSon我按照您的回答中的建议尝试了循环，但在循环中，这会给出“无法读取未定义的属性'replace'”

$（this）.html（$（this）.html（）.replace（re

。因此我不确定如何修复我的循环。thx@LGSon您能提供一个输入框用于测试吗？THX将很快更新that@LGSon请在每个列表项中使用不同的字符串。字符串必须保持原样，但用户输入需要设置样式。thx@LGSon请包含多个列表项，因为每个列表项必须保留它的原始文本。@LGSon我按照您的答案中的建议尝试了循环，但在循环中，这给出了“无法读取未定义的属性'replace'”

$（this）.html（$（this）.html（）.replace（re

），因此我不确定如何修复我的循环.thx