前言
在前端开发中，我们经常使用各种工具来提高开发效率，并且使用 npm 来管理这些工具。在 npm 的包管理中，有很多优秀的第三方包，这些包可以大大简化我们的开发工作。
今天，我要向大家介绍一个非常实用的 npm 包 @loll/href，他能够让我们更加方便的操作页面链接地址。
简介
@loll/href 是一个基于原生 js 的 npm 包，主要用于获取或设置页面中 a 标签的 href 属性。
安装
在使用 @loll/href 之前，我们需要先在项目中安装该包。
可以使用 npm 或 yarn 安装：
npm install @loll/href --save-dev # 或者 yarn add @loll/href --dev
安装成功后，我们就可以在项目中使用 @loll/href 包了。
基本使用
获取页面中 a 标签 href 属性的值
使用 @loll/href 包可以非常方便地获取页面中 a 标签的 href 属性的值，示例如下：
import { getHref } from '@loll/href';
const href = getHref('a.nav-link');
console.log(href);上面的代码中，我们使用 getHref 方法来获取 class 为 nav-link 的 a 标签的 href 属性值。
修改页面中 a 标签 href 属性的值
另外，使用 @loll/href 包还可以方便地修改页面中 a 标签的 href 属性的值，示例如下：
import { setHref } from '@loll/href';
setHref('a.nav-link', 'https://www.example.com');上面的代码中，我们使用 setHref 方法来将 class 为 nav-link 的 a 标签的 href 属性设置为 https://www.example.com。
高级用法
支持多个选择器
在实际开发中，我们经常需要针对多个不同的选择器来获取或修改链接的 href。使用 @loll/href 包可以方便地支持多个选择器，示例如下：
import { getHref, setHref } from '@loll/href';
const href1 = getHref('a.nav-link, a.nav-item');
const href2 = getHref(['a.nav-link', 'a.nav-item']);
console.log(href1 === href2); // true
setHref(['a.nav-link', 'a.nav-item'], 'https://www.example.com');支持正则表达式匹配
有时候，我们可能需要使用正则表达式匹配 href 属性来获取或修改链接。使用 @loll/href 包可以非常方便地实现这一点，示例如下：
import { getHref, setHref } from '@loll/href';
const href1 = getHref(/^https:\/\/www.example.com/);
console.log(href1);
setHref(/^https:\/\/www.example.com/, 'https://www.lolli.app');上面的代码中，我们使用正则表达式来获取或修改以 https://www.example.com 开头的链接。
效果演示
下面是一个基于 @loll/href 包实现的简单示例，演示了如何使用该包来实现页面中链接的修改：
-- -------------------- ---- -------
--------- -----
------
------
--------- - ------------------
------- --------------
------ - ------- - ---- -------------
----------------- -------------------------
---------
-------
------
-- ---------- -------------------------------------- --------
-------
-------上面的代码中，我们将 id 为 link 的链接修改为了 https://www.lolli.app。
结论
总结起来，@loll/href 是一个非常实用的 npm 包，通过使用该包，我们可以更加方便地获取或修改页面中链接的 href 属性。同时，该包还支持多个选择器和正则表达式匹配，可以大大提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571dc81e8991b448e83e1