截断文本保留关键字

jsBin演示和基本代码的快速浏览：

var string = "Lorem Ipsum is simply dummy book text of the printing and text book long...";
var queryString = "book"; // What we want highlighted

var rgxp = new RegExp("(\\S*.{0,10})?("+ queryString +")(.{0,10}\\S*)?", "ig");
// If you want to account for newlines, replace dots `.` with `[\\s\\S]`
var results = [];

string.replace(rgxp, function(match, $1, $2, $3){
  results.push( ($1?"…"+$1:"") +"<b>"+ $2 +"</b>"+ ($3?$3+"…":"") );
});

// Some ways to use/test the above:
//
// console.log( results.join("\n") );
// someElement.innerHTML = results.join("<br>");
// someElement.innerHTML = string.replace(rgxp, "<span>$1<b>$2</b>$3</span>");

使用示例：jsBin演示

RegExp：

假设我们有一个长字符串，并且想要匹配所有book或Book word外观，
则此正则表达式可以做到这一点：

/book/ig  

^{（ig是（大小写）不敏感和全局标志）}

但是我们不仅需要获取书籍，而且还需要获取匹配之前和之后的文本截断部分。假设前面有10个字符，后面有10个字符：

/.{0,10}book.{0,10}/ig

^{.表示除换行符外的任何字符，并且{minN, maxN}是我们要匹配多少个此类字符的量词。}

为了能够区分前缀块，匹配项和后缀块，以便我们可以分别使用它们（即：用于包装<b>粗体标签等），让我们使用捕获组 ()

/(.{0,10})(book)(.{0,10})/ig

上面的代码将同时匹配Book和book在

“预订公寓，读一本漂亮的蓬松小动物书”

为了知道什么时候加省略号，我们需要将这些块“可选”我们申请懒惰量词小号?

/(.{0,10})?(book)(.{0,10})?/ig

^{现在，捕获组可能会为空。与条件运算符?:（布尔）一起使用时，可以声明省略号，例如：($1 ? "…"+$1 : "")}

现在，我们捕获的内容将如下所示：

预订公寓并
阅读一本不错的书

^{（我将queryString粗体化只是为了视觉效果）}

要修复这些丑陋的单词，让我们添加（添加）任意数量*的非空白字符\S

/(\S*.{0,10})?(book)(.{0,10}\S*)?/ig

现在的结果是：

预定公寓
，读一本漂亮的小书

（请参阅上面的regex101的regex详细信息）

现在让我们将Regex表示法转换为RegExp String（转义反斜杠字符并将我们的ig标志放在第二个参数中）。

new RegExp("(\\S*.{0,10})?(book)(.{0,10}\\S*)?", "ig");

由于使用了new RegExp方法，我们现在可以将变量传递到：

var queryString = "book";
var rgxp = new RegExp("(\\S*.{0,10})?("+ queryString +")(.{0,10}\\S*)?", "ig");

最后，检索和使用我们的三人抓获组，我们可以访问它们的内部.replace() 字符串参数使用"$1"，"$2"以及"$3"（见演示）。
或者为了获得更大的自由，我们可以使用传递所需参数的回调函数代替String Parameter。.replace(rgxp, function(match, $1, $2, $3){

笔记：

此代码不会返回重叠的匹配项。假设我们在上述字符串中搜索"an"。它会不会返回两场比赛的“一”与“和”，但只有在第一 "an"，因为另外一个是太近了第一个，和正则表达式已经消耗后的字符，由于先进的最大值 10在.{0,10}。更多信息。

如果源字符串中包含HTML标记，请确保（为方便起见）仅搜索文本内容中的内容（不搜索HTML字符串）-否则，将需要更复杂的方法。

有用的资源：

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/replace
http： //www.rexegg.com/regex-quickstart.html