npmpackage.info

Gathering detailed insights and metrics for @jsdevtools/rehype-url-inspector

@jsdevtools/rehype-url-inspector - 2.0.2 | npmpackage.info

@jsdevtools/rehype-url-inspector

A rehype plugin to inspect, validate, or rewrite URLs anywhere in an HTML document

2.0.2

MIT

JavaScript

33.17 kB

2.7

Installations

npm install @jsdevtools/rehype-url-inspector

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=10

Node Version

10.21.0

NPM Version

6.14.4 Pull Requests

Open

0

Total

1

Closed

1

Issues

Open

2

Total

2

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

TypeScript

JavaScript (55%)

TypeScript (45%)

Developer

JS-DevTools

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

24 Stars

45 Commits

4 Forks

2 Watchers

1 Branches

3 Contributors

Updated on Jul 09, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

2.0.2

Package Id

@jsdevtools/rehype-url-inspector@2.0.2

Unpacked Size

33.17 kB

Size

10.65 kB

File Count

NPM Version

6.14.4

Node Version

10.21.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

url-regex vfile

Dev Dependencies

@jsdevtools/eslint-config @jsdevtools/version-bump-prompt @types/chai @types/mocha @types/node @types/unist chai eslint mocha npm-check nyc rehype-parse rehype-stringify shx sinon to-vfile typescript unified

Rehype URL Inspector

A rehype plugin to inspect, validate, or rewrite URLs anywhere in an HTML document

Features

Inspect every URL on an HTML page and do whatever you want to, such as:
- Normalize URLs
- Check for broken links
- Replace URLs with different URLs
- Add attributes (like target="blank") to certain links
Finds all types of URLs by default, such as:
- <a href="http://example.com">
- <img src="img/logo.png">
- <link rel="stylesheet" href="/css/main.css">
- <link rel="manifest" href="/site.manifest">
- <meta rel="canonical" content="https://example.com/some/page/">
- <meta property="og:image" content="img/logo.png">
- <script src="//example.com/script.js">
- <script type="application/ld+json">{"url": "www.example.com"}</script>
- <style>body { background: url("/img/background.png"); }</style>
You can remove the built-in URL rules
You can add your own custom URL rules
You can abort the URL search at any time

Example

example.html
This HTML file contains many different types of URLs:

1<html>
2  <head>
3    <link rel="canonical" href="http://example.com/some/page/">
4    <link rel="manifest" href="/site.webmanifest">
5    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon.png">
6    <link rel="stylesheet" type="text/css" href="/css/main.css?v=5">
7
8    <meta name="twitter:url" content="http://example.com/some/page/">
9    <meta name="twitter:image" content="http://example.com/img/logo.png">
10
11    <script type="application/ld+json">
12      {
13        "@context": "http://schema.org",
14        "headline": "Hello, World!",
15        "url": "http://example.com/some/page/",
16        "image": "http://example.com/img/logo.png"
17      }
18    </script>
19
20    <style>
21      body {
22        background: #ffffff url("img/background.png") center center no-repeat;
23      }
24    </style>
25  </head>
26  <body>
27    <h1>
28      <a href="/">
29        <img src="/img/logo.png"> Hello World
30      </a>
31    </h1>
32    <p>
33      <a href="//external.com" target="_blank">Lorem ipsum</a> dolor sit amet,
34      non dignissim dolor. Sed diam tellus, <a href="some-page.html">malesuada, dictum nulla</a>.
35    </p>
36
37    <script src="//external.com/script.js"></script>
38  </body>
39</html>

example.js
This script reads the example.html file above and finds all the URLs in it. The script uses unified, rehype-parse, rehype-stringify, and to-vfile.

1const unified = require("unified");
2const parse = require("rehype-parse");
3const inspectUrls = require("@jsdevtools/rehype-url-inspector");
4const stringify = require("rehype-stringify");
5const toVFile = require("to-vfile");
6
7async function example() {
8  // Create a Rehype processor with the inspectUrls plugin
9  const processor = unified()
10    .use(parse)
11    .use(inspectUrls, {
12      inspectEach({ url }) {
13        // Log each URL
14        console.log(url);
15      }
16    })
17    .use(stringify);
18
19  // Read the example HTML file
20  let file = await toVFile.read("example.html");
21
22  // Crawl the HTML file and find all the URLs
23  await processor.process(file);
24}
25
26example();

Running this script produces the following output:

http://example.com/some/page/
/site.webmanifest
/img/favicon.png
/css/main.css?v=5
http://example.com/some/page/
http://example.com/img/logo.png
http://schema.org
http://example.com/some/page/
http://example.com/img/logo.png
img/background.png
/
/img/logo.png
//external.com
some-page.html
//external.com/script.js

Installation

You can install Rehype URL Inspector via npm.

1npm install @jsdevtools/rehype-url-inspector

You'll probably want to install unified, rehype-parse, rehype-stringify, and to-vfile as well.

1npm install unified rehype-parse rehype-stringify to-vfile

Usage

Using the URL Inspector plugin requires an understanding of how to use Unified and Rehype. Here is an excelleng guide to learn the basics.

The URL Inspector plugin works just like any other Rehype plugin. Pass it to the .use() method with an options object.

1const unified = require("unified");
2const inspectUrls = require("@jsdevtools/rehype-url-inspector");
3
4// Use the Rehype URL Inspector plugin with custom options
5unified().use(inspectUrls, {
6  inspect(urls) { ... },      // This function is called once with ALL of the URLs
7  inspectEach(url) { ... },   // This function is called for each URL as it's found
8  selectors: [
9    "a[href]",                // Only search for links, not other types of URLs
10    "div[data-image]"         // CSS selectors for custom URL attributes
11  ]
12});

Options

Rehype URL Inspector supports the following options:

Option	Type	Default	Description
`selectors`	array of strings, objects, and/or functions	built-in selectors	Selectors indicate where to look for URLs in the document. Each selector can be a CSS attribute selector string, like `a[href]` or `img[src]`, or a function that accepts a HAST node and returns its URL(s). See `extractors.ts` for examples.
`keepDefaultSelectors`	boolean	`false`	Whether to keep the default selectors in addition to any custom ones.
`inspect`	function	no-op	A function that is called once and receives an array containing all the URLs in the document
`inspectEach`	function	no-op	A function that is called for each URL in the document as it's found. Return `false` to abort the search and skip the rest of the document.

URL Objects

The inspectEach() function receives a UrlMatch object. The inspect() function receves an array of UrlMatch objects. Each object has the following properties:

Property	Type	Description
`url`	string	The URL that was found
`propertyName`	string or undefined	The name of the HAST node property where the URL was found, such as `"src"` or `"href"`. If the URL was found in the text content of the node, then `propertyName` is `undefined`.
`node`	object	The HAST Element node where the URL was found. You can make changes to this node, such as re-writing the URL, adding additional attributes, etc.
`root`	object	The HAST Root node. This gives you access to the whole document if you need it.
`file`	object	The File object that gives you information about the HTML file itself, such as the path and file name.

Contributing

Contributions, enhancements, and bug-fixes are welcome! Open an issue on GitHub and submit a pull request.

Building

To build the project locally on your computer:

Clone this repo
git clone https://github.com/JS-DevTools/rehype-url-inspector.git
Install dependencies
npm install
Build the code
npm run build
Run the tests
npm test

License

Rehype URL Inspector is 100% free and open-source, under the MIT license. Use it however you want.

This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

Big Thanks To

Thanks to these awesome companies for their support of Open Source developers ❤

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More