在前端开发中，很多时候需要对输入的手机号码进行格式化和高亮显示，以提高用户的体验。而 npm 包 @dvhb/phone-highlight 就是一个可以实现这个功能的工具库，本文将介绍如何使用该库完成手机号码高亮显示的功能。
安装
使用 @dvhb/phone-highlight 需要先在项目中安装该包，可以通过以下命令进行安装：
npm install @dvhb/phone-highlight
引入
安装完成后，可以在项目中引入 @dvhb/phone-highlight：
import phoneHighlight from '@dvhb/phone-highlight';
使用
引入之后，我们可以使用 phoneHighlight 这个函数对手机号码进行高亮处理：
const result = phoneHighlight('+86 13812345678');
console.log(result);运行以上代码，可以得到如下结果：
+86 <span class="phonenumber">13812345678</span>
在这个结果中，手机号码被放置在了一个 span 标签中，并加上了一个类名，以便于我们在样式中进行高亮处理。
参数
除了默认的处理方式之外，@dvhb/phone-highlight 还支持更多的参数选项，以便于我们灵活地控制高亮效果。以下是常用的参数选项：
highlightTag
highlightTag 选项用于指定包裹手机号码的标签名，默认为 span。我们可以通过以下方式来使用该选项：
const result = phoneHighlight('+86 13812345678', { highlightTag: 'div' });
console.log(result);运行以上代码，可以得到如下结果：
+86 <div class="phonenumber">13812345678</div>
highlightClass
highlightClass 选项用于指定包裹手机号码的标签的类名，默认为 phonenumber。我们可以通过以下方式来使用该选项：
const result = phoneHighlight('+86 13812345678', { highlightClass: 'phone' });
console.log(result);运行以上代码，可以得到如下结果：
+86 <span class="phone">13812345678</span>
countryCode
countryCode 选项用于指定要高亮显示的手机号码所属的国家代码，默认为空字符串。如果指定了该选项，@dvhb/phone-highlight 将会根据该国家代码来识别和高亮显示手机号码。例如：
const result = phoneHighlight('0769-88886666', { countryCode: 'cn' });
console.log(result);运行以上代码，可以得到如下结果：
0769-<span class="phonenumber">88886666</span> [cn]
format
format 选项用于指定要对手机号码进行格式化的方式，默认为空字符串。如果指定了该选项，@dvhb/phone-highlight 将会按照该格式来对手机号码进行格式化。例如：
const result = phoneHighlight('+8613812345678', { format: '0 (000) 000-00-00' });
console.log(result);运行以上代码，可以得到如下结果：
+86 (138) 123-45-78
示例代码
以下是一个完整的示例代码，演示了如何使用 @dvhb/phone-highlight 对多个手机号码进行高亮处理：
-- -------------------- ---- -------
--------- -----
------
------
------------ -----------------
-------
------------ -
----------------- -------
------ ----
-
--------
-------
------
----
----
--- -----------
-----
----
-- ----- --------
-----
----
--- -----------
-----
----
-------------
-----
-----
------- ----------------------------------------------------------------------------------------------------
--------
----- ------------ - -
---- -------------
--- ----- ----------
---- -------------
---------------
--
----- -- - -----------------------------
---------------------------------- -- -
----- -- - -----------------------------
----- ------ - ----------------------------
------------ - -------
-------------------
---
---------
-------
-------在这个示例代码中，我们首先在样式中定义了 .phonenumber 类，用于对高亮的手机号码进行样式控制。然后在 JavaScript 中，我们使用 phoneHighlight 对多个手机号码进行处理，并将结果添加到页面中进行展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac672e0