AngularJS/JavaScript-搜索词的子字符串，并用<；span>；

我有一个长字符串，例如：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis viverra diam non justo. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus.

我想创建（可能）一个过滤器，它将查找特定的部分，用span标记它，并在前后返回一些字符（四舍五入为整字）

因此，就我们的例子而言：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis viverra diam non justo. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus.

过滤器应为：

text | 'ridiculus' : 10 : 20

它应该返回：

nascetur <span class="marked">ridiculus</span> mus. Duis viverra

nascetur ridiculus mus。杜伊斯维韦拉酒店

如果过滤器为每次出现的搜索项返回这些子字符串的数组，则最好的方法是

非常感谢你的帮助

编辑1： 突出作品。谢谢但我还需要将字符串拆分为子字符串数组，子字符串带有突出显示的搜索词，并且前后都有给定数量的字符。

Logic

• 接受来自DOM的搜索和内容
• 解析搜索：替换所有空格以允许多词搜索
• 然后使用搜索值创建一个正则表达式。注意：为递归和不区分大小写的搜索添加标志

  g

  和

  i

• 创建一个函数，该函数接受字符串并以必要的样式返回HTML
• 然后使用这个正则表达式和上面声明的函数替换内容字符串
• 将返回值设置为innerHTML

document.getElementById（“btnSearch”）.addEventListener（“单击”，processSearch）
函数processSearch（）{
var search=document.getElementById（'txtSearch'）.value；
search=search.replace（//g，“|”）；
var contentDiv=document.querySelector（“.content”）
contentDiv.innerHTML=getHighlightHTML（contentDiv.innerHTML，搜索）；
}
函数getHighlightHTML（文本，搜索）{
var regex=新的RegExp（搜索，“gi”）；
返回文本。替换（正则表达式，wrapHighlight）
}
函数wrapHighlight（str）{
返回“+str+”
}

。突出显示{
边框底部：2倍纯青色；
}

搜寻
这是一个随机测试，只是为了模拟基于搜索值的单词高亮显示。