在前端开发中，文本搜索栏是一个常见的功能，它可以帮助用户快速定位到需要查找的内容。而在 ES11 中，新增了一个 String.prototype.replaceAll() 方法，可以更加方便地实现文本搜索栏的功能。
String.prototype.replaceAll() 方法介绍
String.prototype.replaceAll() 方法可以替换字符串中的所有匹配项。它接受两个参数，第一个参数是要替换的字符串或正则表达式，第二个参数是替换后的字符串或函数。
示例代码如下：
----- --- - ------ ------- ----- ----------- - ------------------- ----- ------------------------- -- ------ ------
在上面的示例中，我们将字符串中的所有 'o' 替换成了 'x'。
使用 String.prototype.replaceAll() 实现文本搜索栏
现在，我们来看一下如何使用 String.prototype.replaceAll() 方法实现文本搜索栏。
首先，我们需要在 HTML 中添加一个搜索栏和一个展示结果的区域：
------ ----------- ---------------- ---- -------------------------
接下来，我们需要在 JavaScript 中获取到这两个元素，并给搜索栏添加一个输入事件监听器：
----- --------- - --------------------------------------
----- ------------ - -----------------------------------------
----------------------------------- -- -- -
----- ---------- - -----------------------
-- ----------- --- --- -
---------------------- - ---
-------
-
----- ------- - ------ ----- ----- --- ----- ----------- ---------- ----- --- ----- ----- -------- -------- ----- --- --------- ------- ------ -- ------ --------- -------- ------ --- ------- --- ------ -- ----- -------- ------ ----- --- ----------- -------
----- ------------------ - ------------------------------ ------ -----------------------------------------
---------------------- - -------------------
---在上面的代码中，我们获取到了搜索栏和展示结果的元素，并给搜索栏添加了一个输入事件监听器。当用户输入内容时，我们获取到了搜索栏的值，并将其与一段示例文本进行匹配。
如果搜索栏的值为空，我们将展示结果的区域清空。如果搜索栏的值不为空，我们使用 String.prototype.replaceAll() 方法将匹配到的文本用一个带有 'highlight' 类名的 span 标签包裹起来，并将结果展示在展示结果的区域中。
最后，我们还需要添加一些样式来使搜索到的内容更加明显：
---------- - ----------------- ------- ------------ ----- -
总结
使用 ES11 中的 String.prototype.replaceAll() 方法可以方便地实现文本搜索栏的功能。我们可以通过监听搜索栏的输入事件，将输入的内容与需要搜索的文本进行匹配，然后使用 String.prototype.replaceAll() 方法将匹配到的文本高亮展示出来。这样，用户就可以更加方便地查找到需要的内容了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e27ff11886fbafa4f306fa