AngularJS/JavaScript - 搜索词的子字符串并用 <span> 标记答案

【问题标题】：AngularJS/JavaScript - Substring of searched term and marked it with <span>AngularJS/JavaScript - 搜索词的子字符串并用 <span> 标记
【发布时间】：2017-02-03 07:35:49
【问题描述】：

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

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 标签标记它，并在前后返回一些字符（四舍五入到整个单词）。

所以对于我们的例子：

过滤器应该是：

text | 'ridiculus' : 10 : 20

它应该返回：

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

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

非常感谢您的帮助。

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

【问题讨论】：

标签： javascript angularjs search filter

【解决方案1】：

逻辑

接受来自 DOM 的搜索和内容。
解析搜索：替换所有空格以允许多词搜索。
然后使用搜索值创建一个正则表达式。请注意添加标志 g 和 i 以进行递归和不区分大小写的搜索。
创建一个接受字符串并以必要样式返回 HTML 的函数。
然后使用这个正则表达式和上面声明的函数替换内容字符串。
将返回值设置为innerHTML。

document.getElementById("btnSearch").addEventListener("click", processSearch)

function processSearch(){
  var search = document.getElementById('txtSearch').value;
  search = search.replace(/ /g, '|');
  var contentDiv = document.querySelector('.content')
  contentDiv.innerHTML = getHighlightHTML(contentDiv.innerHTML, search);
}

function getHighlightHTML(text, search){
  var regex = new RegExp(search, "gi");
  return text.replace(regex, wrapHighlight)
}

function wrapHighlight(str){
  return "<span class='highlight'>" + str + "</span>"
}

.highlight{
  border-bottom: 2px solid cyan;
}

<input type="text" id="txtSearch" />
<button id="btnSearch" >Search</button>

<div class="content">
  This is a <b>random test</b>, just to simulate word highlight based on search value.
</div>

【讨论】：

【解决方案2】：

you can just pass your full text and searched text in the filter defined. and in span, you can take html binding. Please look the working code on jsfiddle below :

Demo

【讨论】：