简介
ontoforce-react-highlighter 是一款在 React 中进行字符串高亮处理的 npm 包。其支持多种高亮模式，并且能够灵活地处理字符串，符合前端开发的实际需求。
安装
你可以通过 npm 在你的项目中安装 ontoforce-react-highlighter。
npm install ontoforce-react-highlighter --save
使用
使用 ontoforce-react-highlighter 很简单，只需要传入 text 和 search 两个参数即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ------------------------------
-------- ----- -
----- ---- - ----- -- - ---- -------
----- ------ - -------
------ -
-----
------------ ----------- --------------- --
------
--
-例如以上示例传入的参数，将会返回一个高亮处理过的组件：
This is a <mark>demo</mark> text.
ontoforce-react-highlighter 使用了 <mark> 标签来进行高亮处理，可以通过设置 highlightTag 参数修改高亮标签。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ------------------------------
-------- ----- -
----- ---- - ----- -- - ---- -------
----- ------ - -------
------ -
-----
------------ ----------- --------------- ------------------- --
------
--
-以上示例将会返回：
This is a <span>demo</span> text.
高级应用
ontoforce-react-highlighter 除了基础功能外，还支持多种高级应用，满足更多复杂的需求。
多关键词高亮
如果你需要同时高亮多个关键词，只需要将 search 参数改成数组即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ------------------------------
-------- ----- -
----- ---- - ----- -- - ---- -------
----- ------ - -------- --------
------ -
-----
------------ ----------- --------------- --
------
--
-以上示例将会返回：
This is a <mark>demo</mark> <mark>text</mark>.
正则表达式高亮
如果你需要使用正则表达式来匹配高亮，可以将 search 参数设置为正则表达式。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ------------------------------
-------- ----- -
----- ---- - ----- -- - ---- -------
----- ------ - --- ---------------------- ----- -- -- - ------
------ -
-----
------------ ----------- --------------- --
------
--
-以上示例将会返回：
This <mark>demo</mark> <mark>text</mark>.
自定义高亮样式
如果你希望进行更为自由的样式定制，可以使用 highlightStyles 参数。该参数接收一个 CSS 样式对象，该样式对象中的键名为样式属性名，键值为对应的样式值。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ------------------------------
-------- ----- -
----- ---- - ----- -- - ---- -------
----- ------ - -------
----- --------------- - -
---------------- ---------
----------- ----
--
------ -
-----
------------
-----------
---------------
---------------------------------
--
------
--
-以上示例将会返回：
This is a <mark style="background-color: yellow; font-weight: 700">demo</mark> text.
总结
在本文中，我们介绍了 npm 包 ontoforce-react-highlighter 的基本使用方法，并且介绍了多种高级应用。通过使用这款 npm 包，我们可以快速地进行字符串高亮处理，大大提高了开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e9d9381d61a3540bdb