Linkify

https://linkify.js.org
Admin
Linkify is a JavaScript plugin that detects and converts links, URLs, email addresses, hashtags, and...
Tokens:15,012
Snippets:178
Trust Score:8.1
Update:6 months ago
Show doc for...
Tokens:
Raw
### Installation

Source: https://linkify.js.org/docs/linkifyjs.html

Instructions for installing LinkifyJS via npm or by including it in a browser.

```APIDOC
## Installation

### Node.js module

Install from the command line with NPM:
```
npm install linkifyjs
```

Import into your JavaScript with `require`:
```javascript
const linkify = require("linkifyjs");
```

or with ES modules:
```javascript
import * as linkify from "linkifyjs";
```

### Browser globals

Download linkify and extract the contents into your website’s assets directory. Include the following script in your HTML:
```html
<script src="linkify.js"></script>
```
```

--------------------------------

### Install Linkify packages

Source: https://linkify.js.org/docs

Use npm to install the core library and the HTML conversion package.

```bash
npm install linkifyjs linkify-html
```

--------------------------------

### Installation

Source: https://linkify.js.org/docs/linkify-html.html

Instructions for installing the linkifyjs and linkify-html modules for both Node.js and browser environments.

```APIDOC
## Installation

### Node.js module

Install from the command line with NPM:
```bash
npm install linkifyjs linkify-html
```

Import into your JavaScript with `require`:
```javascript
const linkifyHtml = require("linkify-html");
```

or with ES modules:
```javascript
import linkifyHtml from "linkify-html";
```

### Browser globals

Download linkify and extract the contents into your website’s assets directory. Include the following scripts in your HTML:
```html
<script src="linkify.js"></script>
<script src="linkify-html.js"></script>
```
```

--------------------------------

### Install Linkify @Mention Plugin

Source: https://linkify.js.org/docs/plugin-mention.html

Use NPM to install the core library and the mention plugin.

```bash
npm install linkifyjs linkify-plugin-mention
```

--------------------------------

### Installation

Source: https://linkify.js.org/docs/linkify-element.html

Instructions for installing the linkify-element module via NPM for Node.js environments.

```APIDOC
## Installation

### Node.js module

Install from the command line with NPM
```
npm install linkifyjs linkify-element
```

Import into your JavaScript with `require`
```javascript
const linkifyElement = require("linkify-element");
```

or with ES6 modules
```javascript
import linkifyElement from "linkify-element";
```

### Browser globals

Download linkify and extract the contents into your website’s assets directory. Include the following scripts in your HTML:

```html
<script src="linkify.js"></script>
<script src="linkify-element.js"></script>
```
```

--------------------------------

### Install Linkify jQuery via NPM

Source: https://linkify.js.org/docs/linkify-jquery.html

Use the command line to install the necessary packages.

```bash
npm install linkifyjs linkify-jquery
```

--------------------------------

### Install and Import Linkify

Source: https://linkify.js.org/docs/linkifyjs.html

Installation via NPM and various import methods for Node.js and ES modules.

```bash
npm install linkifyjs
```

```javascript
const linkify = require("linkifyjs");
```

```javascript
import * as linkify from "linkifyjs";
```

--------------------------------

### Install linkify-js and linkify-html with NPM

Source: https://linkify.js.org/docs/linkify-html.html

Install the necessary packages for using linkify-html in a Node.js environment.

```bash
npm install linkifyjs linkify-html

```

--------------------------------

### Example Output String

Source: https://linkify.js.org/docs/plugin-mention.html

The resulting HTML string after processing mentions with the custom configuration.

```text
'Check out <a href="https://example.com/profiles/cryoem-uoft">@cryoem-uoft</a> and <a href="https://example.com/profiles/nfrasser">@nfrasser</a>';
```

--------------------------------

### Install linkify-string with NPM

Source: https://linkify.js.org/docs/linkify-string.html

Install the linkifyjs and linkify-string packages using NPM for Node.js environments.

```bash
npm install linkifyjs linkify-string

```

--------------------------------

### Install Linkify and Keyword Plugin (NPM)

Source: https://linkify.js.org/docs/plugin-keyword.html

Install the necessary packages for LinkifyJS and the Keyword Plugin using NPM.

```bash
npm install linkifyjs linkify-plugin-keyword
```

--------------------------------

### Install Linkify React via NPM

Source: https://linkify.js.org/docs/linkify-react.html

Use the command line to install the necessary packages for React integration.

```bash
npm install linkifyjs linkify-react
```

--------------------------------

### Install Linkify Hashtag Plugin via NPM

Source: https://linkify.js.org/docs/plugin-hashtag.html

Command to install the required packages using NPM.

```bash
npm install linkifyjs linkify-plugin-hashtag
```

--------------------------------

### Install LinkifyJS and IP Plugin with NPM

Source: https://linkify.js.org/docs/plugin-ip.html

Install the necessary packages for using LinkifyJS and the IP address plugin via NPM.

```bash
npm install linkifyjs linkify-plugin-ip

```

--------------------------------

### Install Linkify Ticket Plugin via NPM

Source: https://linkify.js.org/docs/plugin-ticket.html

Command to install the required packages using NPM.

```bash
npm install linkifyjs linkify-plugin-ticket
```

--------------------------------

### Install Linkify DOM Element via NPM

Source: https://linkify.js.org/docs/linkify-element.html

Use this command to install the necessary packages for Node.js environments.

```bash
npm install linkifyjs linkify-element
```

--------------------------------

### Install LinkifyJS Plugin via NPM

Source: https://linkify.js.org/docs/plugins.html

Use this command to install the core LinkifyJS library and a specific plugin using NPM.

```bash
npm install linkifyjs linkify-plugin-[PLUGIN]

```

--------------------------------

### Linkify Output Example

Source: https://linkify.js.org/docs/plugin-ticket.html

The resulting HTML string after processing a ticket reference.

```html
'This is related to <a href="https://github.com/nfrasser/linkifyjs/issues/42">#42</a>.';
```

--------------------------------

### Linkify Hashtag Output Example

Source: https://linkify.js.org/docs/plugin-hashtag.html

The resulting string output after processing hashtags with the provided options.

```javascript
'Works with hashtags <a href="https://bsky.app/hashtag/PhotoOfTheDay">#PhotoOfTheDay</a> or <a href="https://bsky.app/hashtag/일상">#일상</a>';
```

--------------------------------

### Install Linkify via NPM

Source: https://linkify.js.org/

Use the NPM package manager to add Linkify to your project dependencies.

```bash
npm install linkifyjs
```

--------------------------------

### Configure and Use Linkify Hashtag Plugin

Source: https://linkify.js.org/docs/plugin-hashtag.html

Example of using the formatHref option to resolve hashtags for linkifyHtml and Linkify React components.

```javascript
const options = {
  formatHref: {
    hashtag: (href) => "https://bsky.app/hashtag/" + href.substr(1),
  },
};

// With linkify-html
linkifyHtml("Works with hashtags #PhotoOfTheDay or #일상", options);

// With linkify-react
<Linkify options={options}>
  Works with hashtags #PhotoOfTheDay or #일상
</Linkify>;
```

--------------------------------

### Configure and Use Linkify Ticket Plugin

Source: https://linkify.js.org/docs/plugin-ticket.html

Example of defining a custom href format and applying it to linkifyHtml or Linkify React components.

```javascript
const options = {
  formatHref: {
    ticket: (href) =>
      "https://github.com/nfrasser/linkifyjs/issues/" + href.substr(1),
  },
};

// With linkify-html
linkifyHtml("This is related to #42.", options);

// With linkify-react
<Linkify options={options}>This is related to #42.</Linkify>;
```

--------------------------------

### Import Linkify @Mention Plugin

Source: https://linkify.js.org/docs/plugin-mention.html

Initialize the plugin using CommonJS or ES6 module syntax.

```javascript
const linkify = require("linkifyjs");
require("linkify-plugin-mention");
```

```javascript
import * as linkify from "linkifyjs";
import "linkify-plugin-mention";
```

--------------------------------

### Apply Linkify Options

Source: https://linkify.js.org/docs/options.html

Demonstrates how to pass an options object to various Linkify interfaces.

```javascript
const options = {
  /* ... */
};
linkifyStr(str, options); // or `str.linkify(options)`
linkifyHtml(str, options);
linkifyElement(document.getElementById("id"), options);
$("...").linkify(options);
React.createElement(Linkify, { options: options }, str);
```

--------------------------------

### Implement Linkify Demo Logic

Source: https://linkify.js.org/

This script demonstrates how to bind input from a text area to a live-updating linkified output using custom options for hashtags and mentions.

```javascript
const beforeEl = document.getElementById('linkify-demo-before')
const afterEl = document.getElementById('linkify-demo-after')

const options = {
 rel: 'nofollow noreferrer noopener',
 formatHref: {
 hashtag: (val) => `https://bsky.app/hashtag/${val.substr(1)}`,
 mention: (val) => `https://github.com/${val.substr(1)}`
 }
}

afterEl.innerHTML = linkifyStr(beforeEl.value, options)

beforeEl.addEventListener('input', () => {
 afterEl.innerHTML = linkifyStr(beforeEl.value, options)
})
```

--------------------------------

### Initialize Linkify with Plugins

Source: https://linkify.js.org/docs/linkifyjs.html

Register plugins and protocols before the first invocation to avoid manual init() calls.

```javascript
import * as linkify from "linkifyjs";
import linkifyStr from "linkify-string";
import "linkify-plugin-hashtag";

linkify.registerCustomProtocol("fb");
linkify.registerPlugin("my-custom-plugin", () => {});

linkifyStr("Hello World.com!"); // init() called automatically here on first invocation
```

--------------------------------

### linkify.init

Source: https://linkify.js.org/docs/linkifyjs.html

Initializes Linkify. This method runs automatically before the first linkify invocation. It should be called manually only if plugins or custom protocols are registered after the first invocation.

```APIDOC
## linkify.init

### Description
Initializes Linkify. This method runs automatically before the first linkify invocation. It should be called manually only if plugins or custom protocols are registered after the first invocation.

**Recommendation:** Register any plugins or protocols *before* finding links to avoid calling `init()` manually.

### Request Example
```javascript
import * as linkify from "linkifyjs";
import linkifyStr from "linkify-string";
import "linkify-plugin-hashtag";

linkify.registerCustomProtocol("fb");
linkify.registerPlugin("my-custom-plugin", () => {});

linkifyStr("Hello World.com!"); // init() called automatically here on first invocation

// If registering new protocols or plugins *here*, call linkify.init() immediately after
```
```

--------------------------------

### Import Linkify Ticket Plugin in Node.js

Source: https://linkify.js.org/docs/plugin-ticket.html

Initialization patterns for CommonJS and ES6 module environments.

```javascript
const linkify = require("linkifyjs");
require("linkify-plugin-ticket");
```

```javascript
import * as linkify from "linkifyjs";
import "linkify-plugin-ticket";
```

--------------------------------

### Import Linkify and Keyword Plugin (Node.js CommonJS)

Source: https://linkify.js.org/docs/plugin-keyword.html

Import LinkifyJS and the Keyword Plugin using CommonJS syntax for Node.js environments.

```javascript
const linkify = require("linkifyjs");
const linkifyRegisterKeywords = require("linkify-plugin-keyword");
```

--------------------------------

### Import Linkify with module loaders

Source: https://linkify.js.org/docs

Use ES modules or CommonJS to import the library into your project.

```javascript
import * as linkify from "linkifyjs";
import linkifyHtml from "linkify-html";
```

```javascript
const linkify = require("linkifyjs");
const linkifyHtml = require("linkify-html");
```

--------------------------------

### Include Linkify in browser via script tags

Source: https://linkify.js.org/docs

Load the library directly in the browser using local files or a CDN.

```html
<script src="linkify.min.js"></script>
<script src="linkify-html.min.js"></script>
```

```html
<script src="https://cdn.jsdelivr.net/npm/linkifyjs@4.3.2/dist/linkify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/linkify-html@4.3.2/dist/linkify-html.min.js"></script>
```

--------------------------------

### Import LinkifyJS and IP Plugin (Node.js)

Source: https://linkify.js.org/docs/plugin-ip.html

Import LinkifyJS and the IP address plugin for use in Node.js environments.

```javascript
const linkify = require("linkifyjs");
require("linkify-plugin-ip");

```

--------------------------------

### Import LinkifyJS and IP Plugin (ES6)

Source: https://linkify.js.org/docs/plugin-ip.html

Import LinkifyJS and the IP address plugin using ES6 module syntax.

```javascript
import * as linkify from "linkifyjs";
import "linkify-plugin-ip";

```

--------------------------------

### Import Linkify and Keyword Plugin (ES6 Modules)

Source: https://linkify.js.org/docs/plugin-keyword.html

Import LinkifyJS and the Keyword Plugin using ES6 module syntax.

```javascript
import * as linkify from "linkifyjs";
import linkifyRegisterKeywords from "linkify-plugin-keyword";
```

--------------------------------

### Usage

Source: https://linkify.js.org/docs/linkify-element.html

Demonstrates how to use the linkify-element function to convert links within a specified DOM element.

```APIDOC
## Usage

```javascript
const options = {
  /* ... */
};
linkifyElement(document.getElementById("id"), options, document);
```

This recursively finds links in text nodes within element `#id`.

### Parameters

*   **`element`** (`HTMLElement`) - DOM Element to linkify
*   **`options`** (`Object`) - Optional. Options object.
*   **`doc`** (`HTMLDocument`) - Optional. Explicitly pass in the document object or document implementation if on a non-browser environment like Node.js

### Returns

*   **`element`** (`HTMLElement`) - The same element provided as input
```

--------------------------------

### Register Keywords for Highlighting

Source: https://linkify.js.org/docs/plugin-keyword.html

Register an array of keywords with the Linkify Keyword Plugin to enable their highlighting as links.

```javascript
linkifyRegisterKeywords(["100%", "linkify", "okrs", "roi", "synergy"]);
```

--------------------------------

### Linkify Configuration Options

Source: https://linkify.js.org/docs/options.html

Configuration options for customizing link generation behavior in Linkify.js.

```APIDOC
## Configuration Options

### target
- **Type**: string | Object | Function
- **Default**: null
- **Description**: Sets the target attribute for generated links (e.g., _blank, _parent). Can be a string, an object mapping link types to targets, or a function.

### truncate
- **Type**: number | Object | Function
- **Default**: Infinity
- **Description**: Truncates the displayed link text to a specified length and appends an ellipsis if characters are removed.

### validate
- **Type**: boolean | Object | Function
- **Default**: null
- **Description**: Filters out specific links based on criteria. Accepts a boolean, an object mapping link types to validation rules, or a function returning a boolean.
```

--------------------------------

### Include Linkify in Browser

Source: https://linkify.js.org/docs/linkifyjs.html

Include the library via a script tag for browser-based projects.

```html
<script src="linkify.js"></script>
```

--------------------------------

### Include linkify-js and linkify-html in HTML

Source: https://linkify.js.org/docs/linkify-html.html

Include the linkify and linkify-html JavaScript files in your HTML to use them as browser globals.

```html
<script src="linkify.js"></script>
<script src="linkify-html.js"></script>

```

--------------------------------

### Initialize Linkify via jQuery

Source: https://linkify.js.org/docs/linkify-jquery.html

Apply linkify to selected elements using the jQuery plugin method.

```javascript
const options = {
  /* … */
};
$(selector).linkify(options);
```

--------------------------------

### Apply Linkify with Custom Keyword Formatting (linkify-html)

Source: https://linkify.js.org/docs/plugin-keyword.html

Use linkify-html to process text and apply custom link formatting for registered keywords.

```javascript
linkifyHtml(
  "Use Linkify to complete your OKRs, increase ROI by 100% and create *synergy*",
  options
);
```

--------------------------------

### linkify.registerCustomProtocol

Source: https://linkify.js.org/docs/linkifyjs.html

Registers a custom protocol for recognizing links. This should be called before the first invocation of linkify.

```APIDOC
## linkify.registerCustomProtocol

### Description
Registers a custom protocol for recognizing links. This should be called before the first invocation of linkify. Linkify will consider any string that begins with the given scheme followed by a `:` as a URL link.

### Method
`linkify.registerCustomProtocol(scheme [, optionalSlashSlash = false])`

### Parameters
#### Path Parameters
- **scheme** (string) - Required - The scheme. May only contain characters `a-z` and `-` (hyphens).
- **optionalSlashSlash** (boolean) - Optional - If true, allows links that begin with `scheme:` , not just `scheme://`.

### Request Example
```javascript
linkify.registerCustomProtocol("fb"); // now recognizes links such as fb://feed
linkify.registerCustomProtocol("instagram", true); // now recognizes links such as instagram:account
```
```

--------------------------------

### DOM Data API

Source: https://linkify.js.org/docs/linkify-jquery.html

Declarative way to initialize linkify functionality using HTML data attributes without writing additional JavaScript.

```APIDOC
## DOM Data API

### Description
Enables linkify functionality via HTML attributes on DOM elements.

### Attributes
- **data-linkify** (string) - Required - A selector string defining which elements to linkify (e.g., "this", "p", "#footer").
- **data-linkify-target** (string) - Optional - Sets the target attribute for generated links (e.g., "_parent", "_blank").

### Example
<div data-linkify="this">...</div>
<body data-linkify="p, #footer" data-linkify-target="_parent">...</body>
```

--------------------------------

### Import Linkify React

Source: https://linkify.js.org/docs/linkify-react.html

Import the component using either CommonJS or ES module syntax.

```javascript
const Linkify = require("linkify-react");
```

```javascript
import Linkify from "linkify-react";
```

--------------------------------

### Initialize Linkify jQuery without Global Document

Source: https://linkify.js.org/docs/linkify-jquery.html

Manually provide the document object if it is not globally available.

```javascript
require("linkify-jquery")($, document);
```

```javascript
import linkifyJq from "linkify-jquery";
linkifyJq($, document);
```

--------------------------------

### Include Browser Scripts

Source: https://linkify.js.org/docs/plugin-mention.html

Load the required scripts directly in your HTML file.

```html
<script src="linkify.js"></script>
<script src="linkify-plugin-mention.js"></script>
```

--------------------------------

### Resulting HTML String with Linked Keywords

Source: https://linkify.js.org/docs/plugin-keyword.html

The output string after applying Linkify with custom keyword formatting, showing highlighted keywords as HTML anchor tags.

```html
'Use <a href="/tags/linkify">Linkify</a> to complete your <a href="/tags/okrs">OKRs</a>, increase <a href="/tags/roi">ROI</a> by <a href="/tags/100%">100%</a> and create *<a href="/tags/synergy">synergy</a>*'
```

--------------------------------

### Linkify Options Overview

Source: https://linkify.js.org/docs/options.html

Linkify.js allows customization through an options object passed to its main interfaces. The library provides default options that can be overridden globally or per-instance.

```APIDOC
## Linkify Options

Linkify uses an options object to customize the resulting output. All Linkify interfaces accept an options object. Usage depends on the interface:

```javascript
const options = {
  /* ... */
};
linkifyStr(str, options); // or `str.linkify(options)`
linkifyHtml(str, options);
linkifyElement(document.getElementById("id"), options);
$("...").linkify(options);
React.createElement(Linkify, { options: options }, str);
```

Linkify uses the following default options:

```javascript
linkify.options.defaults = {
  attributes: null,
  className: null,
  defaultProtocol: "http",
  events: null,
  format: (value, type) => value,
  formatHref: (href, type) => href,
  ignoreTags: [],
  nl2br: false,
  rel: null,
  render: null,
  tagName: "a",
  target: null,
  truncate: Infinity,
  validate: true,
};
```

These defaults are stored at `linkify.options.defaults` and may be set globally from there. Use default overrides sparingly.
```

--------------------------------

### Register Custom Protocols

Source: https://linkify.js.org/docs/linkifyjs.html

Define custom URL schemes for link detection.

```javascript
linkify.registerCustomProtocol("fb"); // now recognizes links such as fb://feed
linkify.registerCustomProtocol("instagram", true); // now recognizes links such as instagram:account
```

--------------------------------

### Include LinkifyJS and IP Plugin in HTML

Source: https://linkify.js.org/docs/plugin-ip.html

Include the LinkifyJS and IP address plugin script files in your HTML for browser usage.

```html
<script src="linkify.js"></script>
<script src="linkify-plugin-ip.js"></script>

```

--------------------------------

### Linkify HTML Output

Source: https://linkify.js.org/docs/plugin-ip.html

The expected output string after linkifying HTML content containing an IP address.

```html
'No place like <a href="http://127.0.0.1">127.0.0.1</a>';

```

--------------------------------

### Format Keyword Links with Options

Source: https://linkify.js.org/docs/plugin-keyword.html

Define custom link formats for keywords using the 'formatHref' option in Linkify.

```javascript
const options = {
  formatHref: {
    keyword: (keyword) => "/tags/" + keyword.toLowerCase(),
  },
};
```

--------------------------------

### Import LinkifyJS Plugin with ES6 Modules

Source: https://linkify.js.org/docs/plugins.html

Import the LinkifyJS library and the desired plugin using ES6 module syntax.

```javascript
import * as linkify from "linkifyjs";
import "linkify-plugin-[PLUGIN]";

```

--------------------------------

### Initialize Linkify via DOM Data API

Source: https://linkify.js.org/docs/linkify-jquery.html

Use data attributes to automatically linkify elements without additional JavaScript.

```html
<!-- Find and linkify all entities in this div -->
<div data-linkify="this">…</div>

<!-- Find and linkify the paragraphs and `#footer` element in the body -->
<body data-linkify="p, #footer" data-linkify-target="_parent">
  …
</body>
```

--------------------------------

### Include Linkify and Keyword Plugin (Browser)

Source: https://linkify.js.org/docs/plugin-keyword.html

Include the LinkifyJS and Keyword Plugin scripts in your HTML for browser usage.

```html
<script src="linkify.js"></script>
<script src="linkify-plugin-keyword.js"></script>
```

--------------------------------

### Import linkify-html with ES Modules

Source: https://linkify.js.org/docs/linkify-html.html

Import the linkify-html module into your JavaScript project using ES modules.

```javascript
import linkifyHtml from "linkify-html";

```

--------------------------------

### Import Linkify Hashtag Plugin in Node.js

Source: https://linkify.js.org/docs/plugin-hashtag.html

Methods for importing the plugin using CommonJS or ES6 modules.

```javascript
const linkify = require("linkifyjs");
require("linkify-plugin-hashtag");
```

```javascript
import * as linkify from "linkifyjs";
import "linkify-plugin-hashtag";
```

--------------------------------

### Safe String Linking with linkify-string

Source: https://linkify.js.org/docs/xss.html

Illustrates the safe usage of linkify-string, which assumes plain-text input and outputs HTML with entities encoded. This prevents the execution of malicious scripts.

```javascript
document.body.innerHTML = linkifyStr(
  '<script src="https://evil.h4ckz.example.com/hack.js"></script>'
);

```

```html
'&lt;script src="<a href="https://evil.h4ckz.example.com/hack.js">https://evil.h4ckz.example.com/hack.js</a>"&gt;&lt;/script&gt;'
```

--------------------------------

### Import linkify-string with ES modules

Source: https://linkify.js.org/docs/linkify-string.html

Import the linkify-string function into your JavaScript project using ES module syntax.

```javascript
import linkifyStr from "linkify-string";

```

--------------------------------

### Import Linkify Element in Node.js

Source: https://linkify.js.org/docs/linkify-element.html

Import the module using either CommonJS require or ES6 import syntax.

```javascript
const linkifyElement = require("linkify-element");
```

```javascript
import linkifyElement from "linkify-element";
```

--------------------------------

### Include Linkify Browser Globals

Source: https://linkify.js.org/docs/linkify-react.html

Add the required script tags to your HTML file when using browser globals.

```html
<script src="linkify.js"></script>
<script src="linkify-react.js"></script>
```

--------------------------------

### Include Linkify jQuery via Browser Globals

Source: https://linkify.js.org/docs/linkify-jquery.html

Include the required script files in your HTML document.

```html
<script src="jquery.js"></script>
<script src="linkify.js"></script>
<script src="linkify-jquery.js"></script>
```

--------------------------------

### Import Linkify jQuery in Node.js

Source: https://linkify.js.org/docs/linkify-jquery.html

Import the plugin using CommonJS or ES modules.

```javascript
const $ = require("jquery");
require("linkify-jquery");
```

```javascript
import $ from "jquery";
import "linkify-jquery";
```

--------------------------------

### defaultProtocol Option

Source: https://linkify.js.org/docs/options.html

The `defaultProtocol` option sets the protocol for URLs that do not explicitly include one (e.g., 'github.com').

```APIDOC
## `defaultProtocol`

*   **Type** : `string`
*   **Default** : `'http'`
*   **Values** : `'http'`, `'https'`, `'ftp'`, `'ftps'`, etc.
*   **Data API** : `data-linkify-default-protocol`

Protocol that should be used in `href` attributes for URLs without a protocol (e.g., `github.com`).
```

--------------------------------

### Default Linkify Options

Source: https://linkify.js.org/docs/options.html

The default configuration object used by Linkify.js.

```javascript
linkify.options.defaults = {
  attributes: null,
  className: null,
  defaultProtocol: "http",
  events: null,
  format: (value, type) => value,
  formatHref: (href, type) => href,
  ignoreTags: [],
  nl2br: false,
  rel: null,
  render: null,
  tagName: "a",
  target: null,
  truncate: Infinity,
  validate: true,
};
```

--------------------------------

### Configure Mention Linking

Source: https://linkify.js.org/docs/plugin-mention.html

Customize the mention URL path using the formatHref option for linkify-html or linkify-react.

```javascript
const options = {
  formatHref: {
    mention: (href) => "https://example.com/profiles" + href,
  },
};

// With linkify-html
linkifyHtml("Check out @cryoem-uoft and @nfrasser", options);

// With linkify-react
<Linkify options={options}>Check out @cryoem-uoft and @nfrasser</Linkify>;
```

--------------------------------

### Import linkify-html with CommonJS

Source: https://linkify.js.org/docs/linkify-html.html

Import the linkify-html module into your JavaScript project using the CommonJS module system.

```javascript
const linkifyHtml = require("linkify-html");

```

--------------------------------

### Include Linkify Element in Browser

Source: https://linkify.js.org/docs/linkify-element.html

Load the required scripts in your HTML file to use linkify-element in a browser environment.

```html
<script src="linkify.js"></script>
<script src="linkify-element.js"></script>
```

--------------------------------

### Customizing Link Rendering with render

Source: https://linkify.js.org/docs/options.html

Override the default link generation process using the render option. Provide a function or an object mapping link types to custom rendering logic, which can return strings or elements.

```javascript
"Hello world.com".linkify({
  render: ({ tagName, attributes, content }) => {
    const attributes = "";
    for (const attr in attributes) {
      attributes += ` ${attr}=${attributes[attr]}`;
    }
    return `<${tagName}${attributes}>${content}</${tagName}>`;
  },
});
```

```javascript
<Linkify options={{
  render: {{
    url: ({ attributes, content }) => {{
      return <a {...attributes}>{content}</a>;
    }}
    mention: ({ attributes, content }) => {{
      const { href, ...props } = attributes;
      return <Link to={href} {...props}>{content}</Link>;
    }}
  }}
}}>
  Hello @everyone, welcome to linkify.js.org
</Linkify>
```

--------------------------------

### Validate links with test

Source: https://linkify.js.org/docs

Verify if a string is a valid URL or email address.

```javascript
linkify.test("github.com"); // true
```

```javascript
linkify.test("github.com", "email"); // false
linkify.test("noreply@github.com", "email"); // true
```

--------------------------------

### render Option

Source: https://linkify.js.org/docs/options.html

Customize how linkify generates the final link element, allowing for custom HTML or framework-specific components.

```APIDOC
## `render`

### Description
Use render to override how linkify generates the final link. Specify a function that accepts an intermediate representation of the target link (an object including tag name, attributes, text content). The return value must be a string, HTML element or interface-specific entity.

Default render for `linkify-string` is similar to the following:

May also be specified as an object where each key is a different link type. This is useful in React where a special component must be used for specific link types.

`render` functions run after all other options have been computed with the results (attributes, content, etc.) as the arguments.

### Parameters
#### Request Body
- **render** (Object | ({ tagName: any, attributes: {[attr: string]: any}, content: string, eventListeners: EventListeners }) => any) - Required - A function or object to define custom link rendering.

### Request Example
```javascript
// Example 1: Default string rendering override
"Hello world.com".linkify({
  render: ({ tagName, attributes, content }) => {
    let attrs = "";
    for (const attr in attributes) {
      attrs += ` ${attr}=${attributes[attr]}`;
    }
    return `<${tagName}${attrs}>${content}</${tagName}>`;
  },
});

// Example 2: React specific rendering
// Assuming a React component setup
// <Linkify options={{
//   render: {
//     url: ({ attributes, content }) => {
//       return <a {...attributes}>{content}</a>;
//     },
//     mention: ({ attributes, content }) => {
//       const { href, ...props } = attributes;
//       return <Link to={href} {...props}>{content}</Link>;
//     }
//   }
// }}>
//   Hello @everyone, welcome to linkify.js.org
// </Linkify>
```
```

--------------------------------

### Basic usage of linkify-string

Source: https://linkify.js.org/docs/linkify-string.html

Use linkifyStr to convert URLs in a plain text string into anchor tags. The string method `linkify` can also be used if available.

```javascript
const options = {
  /* … */
};
const str = "For help with GitHub.com, please email support@github.com";
linkifyStr(str, options);
// or
str.linkify(options);

```

```javascript
'For help with <a href="http://github.com" target="_blank">GitHub.com</a>, please email <a href="mailto:support@github.com">support@github.com</a>';

```

--------------------------------

### Linkified HTML String Output

Source: https://linkify.js.org/docs/linkify-html.html

The expected output after applying linkifyHtml to an HTML string containing an email address and a domain.

```html
'<p>For help with <a href="http://github.com" target="_blank">GitHub.com</a>, please email <a href="mailto:support@github.com">support@github.com</a></p>';

```

--------------------------------

### Import linkify-string with require

Source: https://linkify.js.org/docs/linkify-string.html

Import the linkify-string function into your JavaScript project using the `require` method for CommonJS modules.

```javascript
const linkifyStr = require("linkify-string");

```

--------------------------------

### Apply Linkify with Custom Keyword Formatting (linkify-react)

Source: https://linkify.js.org/docs/plugin-keyword.html

Use linkify-react to process text and apply custom link formatting for registered keywords within a React component.

```javascript
<Linkify options={options}>Use Linkify to complete your OKRs, increase ROI by 100% and create *synergy*</Linkify>
```

--------------------------------

### Linkify HTML with IP Addresses

Source: https://linkify.js.org/docs/plugin-ip.html

Use the linkifyHtml function to automatically detect and linkify IP addresses within HTML content.

```javascript
linkifyHtml("No place like 127.0.0.1");

```

--------------------------------

### Include LinkifyJS Plugins in HTML

Source: https://linkify.js.org/docs/plugins.html

Include the LinkifyJS core script and the desired plugin script in your HTML file for browser usage.

```html
<script src="linkify.js"></script>
<script src="linkify-plugin-[PLUGIN].js"></script>

```

--------------------------------

### linkify.find

Source: https://linkify.js.org/docs/linkifyjs.html

Finds all links in a given string, optionally filtering by type or applying formatting options.

```APIDOC
## linkify.find

### Description
Finds all links in the given string.

### Method
`linkify.find(str [, type = null] [, opts = null])`

### Parameters
#### Path Parameters
- **str** (string) - Required - The string to search for links.
- **type** (string) - Optional - Only find links of the given type (e.g., 'url', 'email').
- **opts** (Object) - Optional - Link formatting options.

### Returns
`Array` - A list of links where each element is an object with the following properties:
  - **type** (string) - The type of entity found (e.g., 'url', 'email', 'hashtag', 'mention', 'ticket', 'ipv4', 'keyword').
  - **value** (string) - The original entity substring.
  - **href** (string) - The value of this link’s `href` attribute.
  - **start** (number) - The index of the link’s first character in the given string.
  - **end** (number) - The index after the link’s last character in the given string.

### Request Example
```javascript
linkify.find("For help with GitHub.com, please email support@github.com");
```

### Response Example
```json
[
  {
    "type": "url",
    "value": "GitHub.com",
    "isLink": true,
    "href": "http://GitHub.com",
    "start": 14,
    "end": 24
  },
  {
    "type": "email",
    "value": "support@github.com",
    "isLink": true,
    "href": "mailto:support@github.com",
    "start": 39,
    "end": 57
  }
]
```

**Note:** If the second argument is an object, it will be interpreted as `opts` with options, not as `type`.
```

--------------------------------

### Include Linkify Hashtag Plugin in Browser

Source: https://linkify.js.org/docs/plugin-hashtag.html

Script tags required to include the plugin in an HTML file.

```html
<script src="linkify.js"></script>
<script src="linkify-plugin-hashtag.js"></script>
```

--------------------------------

### Include linkify scripts in HTML

Source: https://linkify.js.org/docs/linkify-string.html

Include the linkify.js and linkify-string.js scripts in your HTML file to use linkify-string globally in the browser.

```html
<script src="linkify.js"></script>
<script src="linkify-string.js"></script>

```

--------------------------------

### Add Event Handlers to Links

Source: https://linkify.js.org/docs/linkify-react.html

Attach event listeners to generated links using the options.attributes object.

```jsx
const linkProps = {
  onClick: (event) => {
    if (!confirm('Are you sure you want to leave this page?')) {
       event.preventDefault()
    }
  }
};

return (
  <Linkify options={{ attributes: linkProps }}>
    ...
  </Linkify>
);
```

--------------------------------

### Linkify Rendered HTML Output

Source: https://linkify.js.org/docs/linkify-react.html

The resulting HTML structure produced by the Linkify component.

```html
'<p>For help with <a href="http://github.com" target="_blank">GitHub.com</a>, please email <a href="mailto:support@github.com">support@github.com</a></p>';
```

--------------------------------

### linkify.registerPlugin

Source: https://linkify.js.org/docs/linkifyjs.html

Registers a custom plugin for detecting new kinds of links. This should be called before the first invocation of linkify.

```APIDOC
## linkify.registerPlugin

### Description
Registers a custom plugin for detecting new kinds of links. This should be called before the first invocation of linkify.

### Method
`linkify.registerPlugin(name, plugin)`

### Parameters
#### Path Parameters
- **name** (string) - Required - Unique name of the plugin to register.
- **plugin** (Function) - Required - Plugin implementation function.

**Caution:** The plugin development API is in its very early stages and only supports very basic plugins. Updated features, APIs, and docs are in progress. Check out the sample Hashtag plugin for an example. Check out the Keyword plugin for more advanced usage.
```

--------------------------------

### Safe DOM Manipulation with Linkify (React)

Source: https://linkify.js.org/docs/xss.html

Demonstrates how linkify-react safely handles potentially malicious HTML by treating it as plain text, escaping special characters when creating DOM nodes. This prevents script execution.

```javascript
import ReactDOM from "react-dom";
import Linkify from "linkify-react";

const container = document.getElementById("container");
const content = 
  '<script src="https://evil.h4ckz.example.com/hack.js"></script>';

ReactDOM.render(<Linkify>{content}</Linkify>, container);

```

```javascript
const node1 = document.createTextNode('<script src="');
container.appendChild(node1);

const node2 = document.createElement("a");
node2.setAttribute("href", "https://evil.h4ckz.example.com/hack.js");
node2.innerText = "https://evil.h4ckz.example.com/hack.js";
container.appendChild(node2);

const node3 = document.createTextNode('></script>');
container.appendChild(node3);

```

```html
<script src="
<a href="https://evil.h4ckz.example.com/hack.js">
  https://evil.h4ckz.example.com/hack.js
</a>
"></a>
```

--------------------------------

### Include Linkify Ticket Plugin in Browser

Source: https://linkify.js.org/docs/plugin-ticket.html

Script tags required to load the plugin in a browser environment.

```html
<script src="linkify.js"></script>
<script src="linkify-plugin-ticket.js"></script>
```

--------------------------------

### format Option

Source: https://linkify.js.org/docs/options.html

The `format` option enables custom formatting of the text displayed for linkified entities, such as truncating long URLs.

```APIDOC
## `format`

*   **Type** : `Object | (value: string, type: string, token: MultiToken) => string`
*   **Default** : `null`

Format the text displayed by a linkified entity. e.g., truncate a long URL (a dedicated `truncate` option also exists). Accepts an object where each key is the link type (e.g., `'url'`, `'email'`, etc.) and each value is the formatting function to use for that type.

```javascript
"http://github.com/nfrasser/linkifyjs/search/?q=this+is+a+really+long+query+string".linkify(
  {
    format: (value, type) => {
      if (type === "url" && value.length > 50) {
        value = value.slice(0, 50) + "…";
      }
      return value;
    },
  },
);

// or

"http://github.com/nfrasser/linkifyjs/search/?q=this+is+a+really+long+query+string".linkify(
  {
    format: {
      url: (value) => (value.length > 50 ? value.slice(0, 50) + "…" : value),
    },
  },
);
```
```

--------------------------------

### tagName Option

Source: https://linkify.js.org/docs/options.html

Specify the HTML tag to use for generated links, useful when anchor tags are not appropriate.

```APIDOC
## `tagName`

### Description
The HTML tag to use for each link. For cases where you can’t use anchor tags. Accepts a function that takes the unformatted href, the link type (e.g., 'url', 'email', etc.) and returns the tag name. Accepts an object where each key is the link type and each value is the tag name to use for that type.

### Parameters
#### Request Body
- **tagName** (string | Object | (href: string, type: string, token: MultiToken) => string) - Required - The HTML tag name to use for links, or a function/object to specify it per link type.

### Request Example
```javascript
// Example 1: Using a single tag name for all links
"github.com".linkify({
  tagName: "span",
});

// Example 2: Using different tag names for specific link types
"#swag".linkify({
  tagName: {
    hashtag: "span",
  },
});
```

### Response Example
```html
<span href="http://github.com">github.com</span>
```
```

--------------------------------

### Require LinkifyJS Plugin in Node.js

Source: https://linkify.js.org/docs/plugins.html

Import the LinkifyJS library and the desired plugin for use in a Node.js environment.

```javascript
const linkify = require("linkifyjs");
require("linkify-plugin-[PLUGIN]");

```

--------------------------------

### jQuery .linkify() Method

Source: https://linkify.js.org/docs/linkify-jquery.html

The primary jQuery plugin method used to scan selected DOM elements and convert text entities into links.

```APIDOC
## jQuery .linkify()

### Description
Converts text entities (URLs, emails, etc.) into clickable links within the selected jQuery elements.

### Method
jQuery Plugin Method

### Parameters
#### Options
- **options** (Object) - Optional - Configuration object for linkify behavior.

### Request Example
$(selector).linkify({
  target: "_blank"
});
```

--------------------------------

### Linkify a DOM Element

Source: https://linkify.js.org/docs/linkify-element.html

Apply linkification to a specific DOM element using the provided options.

```javascript
const options = {
  /* … */
};
linkifyElement(document.getElementById("id"), options, document);
```

--------------------------------

### linkify.tokenize

Source: https://linkify.js.org/docs/linkifyjs.html

An internal method that parses a string into a generic token entity array, used by Linkify's interfaces.

```APIDOC
## linkify.tokenize

### Description
An internal method that parses a string into a generic token entity array. Used by Linkify’s interfaces.

### Method
`linkify.tokenize(str)`

### Parameters
#### Path Parameters
- **str** (string) - Required - The string to tokenize.

### Returns
`Array` - A generic token entity array.
```

--------------------------------

### Configure Link Attributes

Source: https://linkify.js.org/docs/options.html

Adds custom attributes to generated links.

```javascript
"github.com".linkify({
  attributes: {
    title: "External Link",
  },
});
```

--------------------------------

### Configure Link Class Names

Source: https://linkify.js.org/docs/options.html

Sets the class attribute for links using strings, functions, or type-specific objects.

```javascript
"github.com".linkify({
  className: "new-link--url",
});

// or

"github.com".linkify({
  className: (href, type) => "new-link--" + type,
});

// or
"github.com".linkify({
  className: {
    url: "new-link--url",
    email: (href) => "new-link--email",
  },
});
```

```html
<a href="http://github.com" class="new-link--url">github.com</a>
```

--------------------------------

### linkifyHtml Function

Source: https://linkify.js.org/docs/linkify-html.html

The core function for linkifying HTML strings. It takes a string containing HTML and an optional options object, returning the HTML with detected links converted to anchor tags.

```APIDOC
## linkifyHtml Function

### Description
Converts plain text URLs and email addresses within an HTML string into clickable hyperlinks.

### Method
`linkifyHtml(str, options)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **str** (string) - Required - The HTML string to process.
- **options** (Object) - Optional - An object containing configuration options for linkification.

### Request Example
```javascript
const options = {
  /* ... */
};
const str = "<p>For help with GitHub.com, please email support@github.com</p>";
linkifyHtml(str, options);
```

### Response
#### Success Response (200)
- **string** - The HTML string with detected links converted into anchor tags.

#### Response Example
```html
'<p>For help with <a href="http://github.com" target="_blank">GitHub.com</a>, please email <a href="mailto:support@github.com">support@github.com</a></p>'
```
```

--------------------------------

### rel Option

Source: https://linkify.js.org/docs/options.html

Set the `rel` attribute for discovered links, enhancing security and SEO.

```APIDOC
## `rel`

### Description
Set the `rel` attribute for each discovered link. Accepts a function that takes the unformatted href, the link type (e.g., 'url', 'email', etc.) and returns the rel string. Accepts an object where each key is the link type and each value is the rel string to use for that type.

### Parameters
#### Request Body
- **rel** (string | Object | (href: string, type: string, token: MultiToken) => string) - Required - The value for the `rel` attribute, or a function/object to dynamically set it.

### Request Example
```javascript
"github.com".linkify({
  rel: "noopener",
});
```
```

--------------------------------

### Linkify HTML String

Source: https://linkify.js.org/docs/linkify-html.html

Use the linkifyHtml function to convert URLs and email addresses within an HTML string into clickable links. Options can be passed to customize the linkification process.

```javascript
const options = {
  /* … */
};
const str = "<p>For help with GitHub.com, please email support@github.com</p>";
linkifyHtml(str, options);

```

--------------------------------

### events Option

Source: https://linkify.js.org/docs/options.html

The `events` option allows you to attach event listeners to the generated link elements. This is applicable to element and jQuery interfaces.

```APIDOC
## `events`

_*element, jquery interfaces only*_

*   **Type** : `Object | (href: string, type: string, token: MultiToken) => Object`
*   **Default** : `null`

Add event listeners to newly created link elements. Takes an object where each key is a standard event name and the value is an event handler. Also accepts a function that takes the unformatted href and the link type (e.g., `'url'`, `'email'`, etc.) and returns the required events object.

```javascript
$("p").linkify({
  events: {
    click: (e) => alert("Link clicked!"),
    mouseover: (e) => alert("Link hovered!"),
  },
});
```

**For React, specify events in the `attributes` option as standard React events.**
See the React Event docs and the linkify-react event docs for details.
```

--------------------------------

### nl2br Option

Source: https://linkify.js.org/docs/options.html

Automatically convert newline characters (`\n`) to HTML break tags (`<br>`).

```APIDOC
## `nl2br`

### Description
If true, `\n` line breaks are automatically converted to `<br>` tags.

### Parameters
#### Request Body
- **nl2br** (boolean) - Required - Set to `true` to enable newline to break tag conversion.
```

--------------------------------

### Render Linkify Component

Source: https://linkify.js.org/docs/linkify-react.html

Basic usage of the Linkify component within a React render function.

```jsx
// Example render function body
const options = {
  /* … */
};
const content = "For help with GitHub.com, please email support@github.com";
return (
  <Linkify as="p" options={options}>
    {content}
  </Linkify>
);
```

--------------------------------

### Find Links in String

Source: https://linkify.js.org/docs/linkifyjs.html

Locate all links within a string and return an array of entity objects.

```javascript
linkify.find("For help with GitHub.com, please email support@github.com");
```

```json
[
  {
    type: "url",
    value: "GitHub.com",
    isLink: true,
    href: "http://GitHub.com",
    start: 14,
    end: 24,
  },
  {
    type: "email",
    value: "support@github.com",
    isLink: true,
    href: "mailto:support@github.com",
    start: 39,
    end: 57,
  },
];
```

--------------------------------

### formatHref Option

Source: https://linkify.js.org/docs/options.html

Customize the href attribute of generated links. This is particularly useful for custom link types like hashtags or mentions.

```APIDOC
## `formatHref`

### Description
Similar to `format`, except the result of this function will be used as the `href` attribute of the new link. This is useful for hashtags or other plugins, where you don’t want the default to be a link to a named anchor (the default behaviour).

Accepts an object where each key is the link type (e.g., 'url', 'email', etc.) and each value is the formatting function to use for that type.

### Parameters
#### Request Body
- **formatHref** (Object | (href: string, type: string, token: MultiToken) => string) - Required - An object mapping link types to formatting functions, or a single function to format all link types.

### Request Example
```javascript
// Example 1: Using a single function for all link types
"This site is #rad".linkify({
  formatHref: function (href, type) {
    if (type === "hashtag") {
      href = "https://bsky.app/hashtag/" + href.substring(1);
    }
    return href;
  },
});

// Example 2: Using an object for specific link types
"Hey @nfrasser, check out issue #23".linkify({
  formatHref: {
    mention: (href) => "https://github.com" + href,
    ticket: (href) =>
      "https://github.com/nfrasser/linkifyjs/issues/" +
      href.substring(1),
  },
});
```
```
Tokens:
Raw