### Install Linkify Mention Plugin
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-mention/README.md
Use NPM to install the core linkifyjs library and the mention plugin dependency.
```bash
npm install linkifyjs linkify-plugin-mention
```
--------------------------------
### Installation and Import
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-ip/README.md
Instructions on how to install the linkify-plugin-ip package and import it into your JavaScript project using either CommonJS or ES modules.
```APIDOC
## Installation
Install from the command line with NPM
```bash
npm install linkifyjs linkify-plugin-ip
```
Import into your JavaScript with `require`
```javascript
const linkify = require('linkifyjs')
require('linkify-plugin-ip');
```
or with ES modules
```javascript
import * as linkify from 'linkifyjs';
import 'linkify-plugin-ip';
```
```
--------------------------------
### Install Linkify Keyword Plugin
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-keyword/README.md
Install the necessary packages via NPM to enable keyword detection functionality in your project.
```bash
npm install linkifyjs linkify-plugin-keyword
```
--------------------------------
### Install Linkify Hashtag Plugin
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-hashtag/README.md
Install the necessary packages using npm to enable hashtag detection in your project.
```bash
npm install linkifyjs linkify-plugin-hashtag
```
--------------------------------
### Install Dependencies with NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/CONTRIBUTING.md
Installs the necessary project dependencies using the Node Package Manager (NPM). This is a crucial step after cloning the repository to set up the development environment.
```bash
npm install
```
--------------------------------
### LinkifyJS Mention Plugin Installation and Usage
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-mention/README.md
Instructions on how to install the mention plugin using npm and import it into your JavaScript project. It also provides a link to the full documentation for usage details.
```APIDOC
## LinkifyJS Mention Plugin
### Description
This plugin detects and converts Twitter- and GitHub- style "at"-mentions (@mentions) to `` anchor tags using Linkify.
### Installation
Install from the command line with NPM:
```bash
npm install linkifyjs linkify-plugin-mention
```
### Import
Import into your JavaScript with `require`:
```javascript
const linkify = require('linkifyjs');
require('linkify-plugin-mention');
```
Or with ES modules:
```javascript
import * as linkify from 'linkifyjs';
import 'linkify-plugin-mention';
```
### Usage
Refer to the [full documentation](https://linkify.js.org/docs/plugin-mention.html) for detailed usage instructions.
### License
MIT
```
--------------------------------
### Install Linkify jQuery via NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-jquery/README.md
Use the command line to install the necessary linkifyjs core and the jQuery plugin dependency.
```shell
npm install linkifyjs linkify-jquery
```
--------------------------------
### Install Linkify React dependencies
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-react/README.md
Use npm to install both the core linkifyjs library and the linkify-react wrapper component into your project.
```bash
npm install linkifyjs linkify-react
```
--------------------------------
### Install LinkifyJS with NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkifyjs/README.md
Installs the LinkifyJS library using the Node Package Manager (NPM). This is the first step to using the library in a Node.js project or a front-end project managed by NPM.
```bash
npm install linkifyjs
```
--------------------------------
### Install linkify-html with NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-html/README.md
Installs the linkifyjs core library and the linkify-html interface using the Node Package Manager (NPM). These are necessary dependencies for using the library.
```bash
npm install linkifyjs linkify-html
```
--------------------------------
### Usage
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-ip/README.md
Information on how to use the linkify-plugin-ip after installation. It primarily involves importing the plugin, which then extends LinkifyJS's capabilities.
```APIDOC
## Usage
Once the plugin is installed and imported, LinkifyJS will automatically detect and convert IPv4 and IPv6 addresses in your text.
For detailed usage examples and advanced configurations, please refer to the [full documentation](https://linkify.js.org/docs/plugin-ip.html).
### Example
```javascript
// Assuming linkify and the IP plugin are imported
const text = 'Check out this IP address: 192.168.1.1 or this one: 2001:0db8:85a3:0000:0000:8a2e:0370:7334';
const formattedText = linkify.find(text);
console.log(formattedText);
// Output will contain linkify objects for the IP addresses.
```
```
--------------------------------
### Install linkify-plugin-ticket with NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-ticket/README.md
Installs the linkifyjs library and the ticket plugin using npm. These are necessary to enable ticket number detection and conversion.
```bash
npm install linkifyjs linkify-plugin-ticket
```
--------------------------------
### Install linkify-string via NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-string/README.md
The command to install the necessary linkifyjs core and the linkify-string package into your project using the Node Package Manager.
```bash
npm install linkifyjs linkify-string
```
--------------------------------
### Install and Import linkify-plugin-ip
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-ip/README.md
This snippet shows how to install the necessary packages using NPM and then import the LinkifyJS library and the IP address plugin into your JavaScript project. It covers both CommonJS (require) and ES module (import) syntax.
```bash
npm install linkifyjs linkify-plugin-ip
```
```javascript
const linkify = require('linkifyjs')
require('linkify-plugin-ip');
```
```javascript
import * as linkify from 'linkifyjs';
import 'linkify-plugin-ip';
```
--------------------------------
### Install linkify-element with NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-element/README.md
Installs the linkifyjs and linkify-element packages using npm. These packages are necessary for detecting and linking URLs and email addresses within HTML elements.
```bash
npm install linkifyjs linkify-element
```
--------------------------------
### Import LinkifyJS in JavaScript
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkifyjs/README.md
Demonstrates how to import the LinkifyJS library into your JavaScript code. It shows examples for both CommonJS (require) and ES Modules (import) syntax.
```javascript
const linkify = require('linkifyjs');
```
```javascript
import * as linkify from 'linkifyjs';
```
--------------------------------
### Linkify React Component Usage
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Demonstrates how to use the Linkify React component to recursively linkify text content within children. Includes examples for custom options, wrapper elements, custom render functions, and tag exclusion.
```javascript
import Linkify from 'linkify-react';
function App() {
return (
Contact us at support@example.com or visit https://example.com
);
}
function LinkifyWithOptions() {
const options = {
defaultProtocol: 'https',
target: '_blank',
rel: 'noopener noreferrer',
className: 'auto-link',
format: (value, type) => type === 'url' ? `[${value}]` : value
};
return (
Visit github.com for more info
Email: contact@example.com
);
}
function CustomWrapper() {
return (
Check out example.com today!
);
}
function CustomRender() {
const renderLink = ({ tagName, attributes, content }) => {
return (
console.log('clicked', content)}>
{content} ↗
);
};
return (
Visit example.com
);
}
function IgnoreTags() {
return (
Visit example.com
http://raw-url.com (not linked)
);
}
```
--------------------------------
### Configure target Attribute for Linkify HTML
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Shows how to set a custom target attribute for detected URLs when using linkifyHtml. This example sets the target to '_blank' only for URLs, ensuring they open in a new tab.
```javascript
linkifyHtml(str, {
target: (href, type) => type === 'url' && '_blank',
});
```
--------------------------------
### Run Tests and Linting with NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/CONTRIBUTING.md
Runs the project's test suite and code linting checks using NPM scripts. These commands leverage tools like Mocha, ESLint, and Istanbul to ensure code quality and functionality.
```bash
npm test
```
```bash
npm run lint
```
--------------------------------
### Import Linkify Modules
Source: https://github.com/nfrasser/linkifyjs/blob/main/README.md
Demonstrates how to import Linkify modules using modern ES6 syntax for module loaders or CommonJS for Node.js environments.
```javascript
import * as linkify from 'linkifyjs';
import linkifyHtml from 'linkify-html';
```
```javascript
const linkify = require('linkifyjs');
const linkifyHtml = require('linkify-html');
```
--------------------------------
### Generate Distribution Bundle with NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/CONTRIBUTING.md
Performs a clean build and copies the final browser distribution bundle to the root 'dist' directory. This script is used to prepare the distributable files for release.
```bash
npm run dist
```
--------------------------------
### Import Linkify component
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-react/README.md
Demonstrates how to import the Linkify component into a project using either CommonJS require or ES module syntax.
```javascript
const Linkify = require('linkify-react');
```
```javascript
import Linkify from 'linkify-react';
```
--------------------------------
### Configure tagName for React Linkify Component
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Illustrates how to specify a custom HTML tag for the wrapper element in the React Linkify component. By default, it uses React.Fragment, but this example shows how to opt back into using a 'span' tag.
```jsx
{content}
```
--------------------------------
### Import Linkify Mention Plugin
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-mention/README.md
Shows how to import the plugin into a project using either CommonJS require syntax or ES module import syntax.
```javascript
const linkify = require('linkifyjs');
require('linkify-plugin-mention');
```
```javascript
import * as linkify from 'linkifyjs';
import 'linkify-plugin-mention';
```
--------------------------------
### Linkify Find with Options Argument
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Shows how to use the linkify.find() function with an options argument to control the output formatting. This allows for customized link data extraction.
```javascript
linkify.find(str, { formatOptions: { ... } });
```
--------------------------------
### Link Token Methods for Formatted Output
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Illustrates the use of link token methods like toFormattedString, toFormattedHref, and toFormattedObject, which accept a linkify.Options object for customized output.
```javascript
linkToken.toFormattedString(options);
linkToken.toFormattedHref(options);
linkToken.toFormattedObject(options);
```
--------------------------------
### Build Project with NPM Scripts
Source: https://github.com/nfrasser/linkifyjs/blob/main/CONTRIBUTING.md
Executes the build process for the LinkifyJS project using NPM scripts. This command transpiles ES6 source code to ES5 using Babel, generating various output formats for different environments (Node.js, browser globals, ES modules).
```bash
npm run build
```
--------------------------------
### Import linkify-string in JavaScript
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-string/README.md
Demonstrates how to import the linkify-string function into a JavaScript project using either CommonJS require syntax or ES module import syntax.
```javascript
const linkifyStr = require('linkify-string');
```
```javascript
import linkifyStr from 'linkify-string';
```
--------------------------------
### LinkifyJS Plugin Import Comparison (JavaScript)
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Compares the 'before' and 'after' methods of importing and applying plugins like 'hashtag' in LinkifyJS. The 'after' method simplifies plugin integration by directly importing the plugin module.
```javascript
// Before
import * as linkify from 'linkifyjs';
import hashtag from 'linkifyjs/plugins/hashtag';
hashtag(linkify);
// After
import * as linkify from 'linkifyjs';
import 'linkifyjs/plugins/hashtag';
```
--------------------------------
### Register Custom URL Protocols with linkify.registerCustomProtocol()
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Allows the registration of custom URL schemes for link detection. This function must be called before any linkifying operations. It supports protocols that require '://' and those that do not, offering flexibility in defining custom link types.
```javascript
import * as linkify from 'linkifyjs';
// Register protocol requiring ://
linkify.registerCustomProtocol('view-source');
linkify.test('view-source://http://github.com/', 'url'); // true
linkify.test('view-source:github.com', 'url'); // false
// Register protocol with optional ://
linkify.registerCustomProtocol('instagram', true);
linkify.test('instagram:user/nfrasser', 'url'); // true
linkify.test('instagram://user/nfrasser', 'url'); // true
// Register magnet links
linkify.registerCustomProtocol('magnet', true);
const magnetLink = 'magnet:?xt=urn:btih:abc123&dn=filename.zip';
linkify.test(magnetLink, 'url'); // true
// Protocol format requirements:
// - Must contain only lowercase letters, digits, or hyphens
// - Cannot start or end with hyphen
// - Cannot have consecutive hyphens
```
--------------------------------
### Initialize Linkify jQuery with Manual Dependency Injection
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-jquery/README.md
Manually initialize the plugin by passing the jQuery instance and document object, which is useful for environments where the global document is not available.
```javascript
require('linkify-jquery')($, document);
```
```javascript
import linkifyJq from 'linkify-jquery';
linkifyJq($, document);
```
--------------------------------
### Register Custom Protocol with Optional SlashSlash
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Demonstrates registering a custom protocol that does not require '//' after the scheme. This allows for more flexible URL parsing.
```javascript
linkify.registerCustomProtocol('myprotocol', { optionalSlashSlash: true });
```
--------------------------------
### Import Linkify Keyword Plugin
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-keyword/README.md
Import the Linkify core and the keyword plugin using either CommonJS require syntax or ES module import syntax.
```javascript
const linkify = require('linkifyjs');
const registerKeywords = require('linkify-plugin-keyword');
```
```javascript
import * as linkify from 'linkifyjs';
import registerKeywords from 'linkify-plugin-keyword';
```
--------------------------------
### Initialize JavaScript Object Literal
Source: https://github.com/nfrasser/linkifyjs/blob/main/test/spec/html/linkified-alt.html
Demonstrates the creation of an empty JavaScript object and the subsequent assignment of a property. This pattern is commonly used for dynamic data storage.
```javascript
var obj = {};
obj.com = "hi";
```
--------------------------------
### Register a New Plugin with LinkifyJS
Source: https://github.com/nfrasser/linkifyjs/blob/main/CONTRIBUTING.md
Demonstrates how to register a new plugin with the LinkifyJS library using the `linkify.registerPlugin()` method. This is the primary way to extend LinkifyJS's functionality.
```javascript
linkify.registerPlugin("name", plugin);
```
--------------------------------
### Node.js API Usage for LinkifyJS
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Shows how to import and use the LinkifyJS library in a Node.js environment. This enables server-side processing of text to identify and format links.
```javascript
var linkify = require('linkifyjs');
```
--------------------------------
### Import linkify-html in JavaScript
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-html/README.md
Demonstrates how to import the linkify-html function into your JavaScript project, supporting both CommonJS (require) and ES Module (import) syntaxes.
```javascript
const linkifyHtml = require('linkify-html');
```
```javascript
import linkifyHtml from 'linkify-html';
```
--------------------------------
### LinkifyJS: Find and Format Links in Text
Source: https://github.com/nfrasser/linkifyjs/blob/main/test/spec/html/original.html
This snippet demonstrates the core functionality of LinkifyJS, which is to parse a given text and identify various forms of URLs. It can handle protocols like ftp, domain names, localhost addresses, and even GitHub repository paths. The output is a list of discovered links.
```javascript
const linkify = require('linkifyjs');
const text = "Hello here are some links to ftp://awesome.com/?where=this and localhost:8080, pretty neat right? Here is a nested github.com/Hypercontext/linkifyjs paragraph and another link to www.google.com and a var obj = {}; obj.com = \"hi\";";
const links = linkify.find(text);
console.log(links);
```
--------------------------------
### LinkifyJS General Configuration Options
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
This snippet outlines the various configuration options available for LinkifyJS, applicable to all its interfaces. It covers settings for default protocol, target attributes, rel attributes, CSS classes, custom HTML attributes, text formatting, href formatting, truncation, newline conversion, validation rules, DOM event listeners, ignored HTML tags, custom link tag names, and custom rendering functions. Options can be static values, functions, or type-specific objects.
```javascript
const options = {
// Default URL protocol when none specified
defaultProtocol: 'https', // 'http' | 'https' | 'ftp' | etc.
// Link target attribute
target: '_blank',
// Or per-type:
target: {
url: '_blank',
email: null // no target for emails
},
// Or function:
target: (value, type) => type === 'url' ? '_blank' : null,
// Link rel attribute
rel: 'noopener noreferrer',
rel: {
url: 'noopener noreferrer',
email: null
},
// CSS class name
className: 'auto-link',
className: {
url: 'external-link',
email: 'email-link',
hashtag: 'hashtag'
},
// Additional HTML attributes
attributes: {
'data-auto-linked': true,
'aria-label': 'External link'
},
attributes: (href, type) => ({
'data-type': type,
'data-href': href
}),
// Format display text
format: (value, type) => {
if (value.length > 50) return value.slice(0, 47) + '...';
return value;
},
// Format href attribute
formatHref: {
url: (href) => `/redirect?url=${encodeURIComponent(href)}`,
email: (href) => href,
hashtag: (href) => `/tags/${href.slice(1)}`,
mention: (href) => `/users${href}`
},
// Truncate display text (shorthand for format)
truncate: 40,
// Convert newlines to
tags
nl2br: true,
// Validate before linking
validate: true, // Default: link everything
validate: (value, type) => {
// Skip short TLDs
if (type === 'url' && !value.includes('://') && value.split('.').pop().length < 3) {
return false;
}
return true;
},
validate: {
url: (value) => !value.includes('spam.com'),
email: (value) => value.endsWith('@company.com')
},
// DOM event listeners (linkify-element, linkify-jquery only)
events: {
click: (e) => {
console.log('Link clicked:', e.target.href);
analytics.track('link_click', { url: e.target.href });
},
mouseover: (e) => {
showPreview(e.target.href);
}
},
// Tags to ignore (don't linkify content within these)
ignoreTags: ['script', 'style', 'code', 'pre', 'a', 'textarea'],
// Custom HTML tag for links (default: 'a')
tagName: 'a',
tagName: {
url: 'a',
email: 'span' // Render emails as spans instead
},
// Custom render function (overrides default HTML generation)
render: ({ tagName, attributes, content }) => {
return `<${tagName} ${Object.entries(attributes).map(([k,v]) => `${k}="${v}"`).join(' ')}>${content}${tagName}>`;
},
// Per-type render functions:
render: {
url: ({ attributes, content }) => ` ${content}`,
email: ({ attributes, content }) => ` ${content}`
}
};
```
--------------------------------
### Require Specific Plugin in LinkifyJS (Node.js)
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Illustrates how to require and use specific plugins, such as the 'hashtag' plugin, within a Node.js environment. This allows for modular inclusion of features, reducing the overall bundle size.
```javascript
require('linkifyjs/plugins/hashtag')(linkify);
```
--------------------------------
### Linkify jQuery Plugin Integration
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Explains how to use the jQuery plugin to linkify selected elements. Supports both programmatic initialization and declarative configuration via data attributes.
```javascript
import $ from 'jquery';
import 'linkify-jquery';
$('.content').linkify();
$('#user-post').linkify({
defaultProtocol: 'https',
target: '_blank',
rel: 'noopener noreferrer',
className: 'auto-link',
nl2br: true,
events: {
click: function(e) {
ga('send', 'event', 'link', 'click', e.target.href);
}
}
});
```
--------------------------------
### Import Linkify Hashtag Plugin
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-hashtag/README.md
Import the core library and the hashtag plugin into your JavaScript project. Supports both CommonJS require syntax and ES module import syntax.
```javascript
const linkify = require('linkifyjs');
require('linkify-plugin-hashtag');
```
```javascript
import * as linkify from 'linkifyjs';
import 'linkify-plugin-hashtag';
```
--------------------------------
### Register and Find Keywords
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-keyword/README.md
Register a list of keywords to be detected and use the find method to locate these keywords within a provided string.
```javascript
registerKeywords(['foo', 'bar', 'baz']);
linkify.find('Any foo keywords here?');
```
--------------------------------
### Identify and Linkify URLs in Text
Source: https://github.com/nfrasser/linkifyjs/blob/main/test/spec/html/linkified-validate.html
This snippet demonstrates how to parse a string containing various URL formats such as FTP, local host addresses, and standard web domains. It shows how the library handles different protocols and domain structures.
```javascript
import { linkify } from 'linkifyjs';
const text = 'Hello here are some links to ftp://awesome.com/?where=this and localhost:8080, pretty neat right? github.com/Hypercontext/linkifyjs and www.google.com';
const links = linkify.find(text);
console.log(links);
```
--------------------------------
### Register Custom Protocol in LinkifyJS
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Demonstrates how to register a custom protocol for LinkifyJS to recognize and linkify. This allows the library to handle non-standard URL schemes.
```javascript
linkify.registerCustomProtocol('protocol')
```
--------------------------------
### Configure className for Linkify String
Source: https://github.com/nfrasser/linkifyjs/blob/main/CHANGELOG.md
Demonstrates how to set a custom class name for detected links when using linkifyStr. This allows for specific styling of the generated links.
```javascript
linkifyStr(str, { className: 'linkified' });
```
--------------------------------
### IP Address Plugin
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Enables detection of IPv4 and IPv6 addresses. IPv4 addresses are detected standalone, while IPv6 requires a URL scheme prefix. Supports linking to IP addresses.
```APIDOC
## IP Address Plugin
### Description
Detects IPv4 and IPv6 addresses in text. IPv4 addresses are recognized directly, while IPv6 addresses require a URL scheme prefix (e.g., `http://[::1]`). Can link to IP addresses, optionally including port numbers.
### Method
`linkify.find()` and `linkify.test()` with types 'ipv4', 'ipv6', or 'ip'
### Endpoint
N/A (This is a plugin for the linkifyjs library)
### Parameters
#### Request Body
N/A
### Request Example
```javascript
import * as linkify from 'linkifyjs';
import { ipv4Tokens, ipv6Tokens, ip } from 'linkify-plugin-ip';
linkify.registerTokenPlugin('ipv4', ipv4Tokens);
linkify.registerTokenPlugin('ipv6', ipv6Tokens);
linkify.registerPlugin('ip', ip);
linkify.test('192.168.1.1', 'ipv4'); // true
linkify.test('http://[::1]/', 'url'); // true
linkify.find('Server at 192.168.0.1 and backup at 10.0.0.5');
// Returns: [{ type: 'ipv4', value: '192.168.0.1', ... }, { type: 'ipv4', value: '10.0.0.5', ... }]
linkifyHtml('API at http://[::1]:3000/v1', { defaultProtocol: 'http' });
// Returns: 'API at http://[::1]:3000/v1'
```
### Response
#### Success Response (200)
Returns an array of objects, each representing a detected IP address (or URL containing an IP address) with properties like `type`, `value`, and `href`.
#### Response Example
```json
[
{ "type": "ipv4", "value": "192.168.0.1", "href": "http://192.168.0.1", ... },
{ "type": "ipv4", "value": "10.0.0.5", "href": "http://10.0.0.5", ... }
]
```
```
--------------------------------
### Import Linkify jQuery Plugin
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-jquery/README.md
How to include the plugin in your project using either CommonJS require or ES module import syntax.
```javascript
const $ = require('jquery');
require('linkify-jquery');
```
```javascript
import $ from 'jquery';
import 'linkify-jquery';
```
--------------------------------
### Detect IPv4 and IPv6 Addresses with linkify-plugin-ip
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
This plugin enables the detection of IPv4 and IPv6 addresses. IPv4 addresses are detected directly, while IPv6 addresses require a URL scheme prefix. The plugin can register custom token and general plugins for IP detection and allows for default protocol settings when converting IPs to URLs.
```javascript
import * as linkify from 'linkifyjs';
import { ipv4Tokens, ipv6Tokens, ip } from 'linkify-plugin-ip';
import linkifyHtml from 'linkify-html';
// Register IP plugins
linkify.registerTokenPlugin('ipv4', ipv4Tokens);
linkify.registerTokenPlugin('ipv6', ipv6Tokens);
linkify.registerPlugin('ip', ip);
// IPv4 addresses are detected
linkify.test('192.168.1.1', 'ipv4'); // true
linkify.test('256.1.1.1', 'ipv4'); // false (invalid octet)
linkify.test('10.0.0.1', 'ipv4'); // true
linkify.find('Server at 192.168.0.1 and backup at 10.0.0.5');
// Returns:
// [
// { type: 'ipv4', value: '192.168.0.1', href: 'http://192.168.0.1', ... },
// { type: 'ipv4', value: '10.0.0.5', href: 'http://10.0.0.5', ... }
// ]
// IPv4 with port numbers become URLs
linkify.find('Connect to 192.168.1.1:8080/api');
// Returns URL type with full path
// IPv6 requires scheme prefix
linkify.test('http://[::1]/', 'url'); // true
linkify.test('http://[2001:db8::1]/', 'url'); // true
linkifyHtml('API at http://[::1]:3000/v1', { defaultProtocol: 'http' });
// Returns linked IPv6 URL
```
--------------------------------
### linkify.find() - Find All Links in a String
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Scans a string and returns an array of all detected links with their type, value, href, and position. Supports filtering by link type and applying formatting options.
```APIDOC
## linkify.find()
### Description
Scans a string and returns an array of all detected links with their type, value, href, and position in the original string. Supports filtering by link type and applying formatting options.
### Method
`linkify.find(text, options)`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
import * as linkify from 'linkifyjs';
// Find all links in a string
const text = 'Contact us at support@example.com or visit https://example.com for more info';
const links = linkify.find(text);
// Filter by specific link type
const emails = linkify.find('Visit github.com or email test@example.com', 'email');
// Apply formatting options
const truncated = linkify.find('Check out www.verylongdomainname.com today', { truncate: 15 });
// Validate and filter links
const validated = linkify.find('foo.com and spam.com and bar.com', {
validate: (url) => url !== 'spam.com'
});
```
### Response
#### Success Response (200)
An array of link objects, where each object contains:
- **type** (string) - The type of link detected (e.g., 'url', 'email', 'hashtag').
- **value** (string) - The original text that was detected as a link.
- **href** (string) - The generated href attribute for the link.
- **isLink** (boolean) - Always true for detected links.
- **start** (number) - The starting index of the link in the original string.
- **end** (number) - The ending index of the link in the original string.
#### Response Example
```json
[
{
"type": "email",
"value": "support@example.com",
"href": "mailto:support@example.com",
"isLink": true,
"start": 14,
"end": 33
},
{
"type": "url",
"value": "https://example.com",
"href": "https://example.com",
"isLink": true,
"start": 43,
"end": 62
}
]
```
```
--------------------------------
### Import linkify-element using ES Modules
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-element/README.md
Imports the linkifyElement function using ES modules syntax, common in modern JavaScript development. This allows the use of the linkification functionality in projects that support ES modules.
```javascript
import linkifyElement from 'linkify-element';
```
--------------------------------
### Linkify DOM Element Manipulation
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Shows how to use linkify-element to traverse and modify DOM nodes in place. Covers basic usage, event handling, SSR support with JSDOM, and link validation logic.
```javascript
import linkifyElement from 'linkify-element';
const container = document.getElementById('content');
linkifyElement(container);
linkifyElement(document.querySelector('.user-content'), {
defaultProtocol: 'https',
target: '_blank',
rel: 'nofollow noopener',
className: 'external-link',
events: {
click: (e) => console.log('Link clicked:', e.target.href),
mouseover: (e) => e.target.style.color = 'red'
}
});
linkifyElement(document.body, {
ignoreTags: ['script', 'style', 'code', 'pre', 'textarea']
});
linkifyElement(container, {
validate: (value, type) => type === 'url' ? value.startsWith('https://') : true
});
```
--------------------------------
### LinkifyJS Keyword Plugin for Custom Keyword Detection
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
This snippet demonstrates how to use the linkify-plugin-keyword to register and detect custom keywords as links. It shows registration, testing, finding keywords, and custom href formatting for generated links. It supports various keyword formats including ASCII, Unicode, alphanumeric, and hyphenated words.
```javascript
import * as linkify from 'linkifyjs';
import { registerKeywords, tokens, keyword } from 'linkify-plugin-keyword';
import linkifyHtml from 'linkify-html';
// Register keywords before initializing linkify
registerKeywords(['React', 'Vue', 'Angular', 'Svelte']);
// Register the plugin
linkify.registerTokenPlugin('keyword', tokens);
linkify.registerPlugin('keyword', keyword);
// Keywords are now detected
linkify.test('React', 'keyword'); // true
linkify.find('Learn React and Vue today');
// Returns:
// [
// { type: 'keyword', value: 'React', href: 'React', ... },
// { type: 'keyword', value: 'Vue', href: 'Vue', ... }
// ]
// Custom href formatting for documentation links
const options = {
formatHref: {
keyword: (value) => `/docs/${value.toLowerCase()}`
},
className: 'doc-link'
};
linkifyHtml('Get started with React components', options);
// Returns: 'Get started with React components'
// Keywords support various formats:
// - ASCII words: 'react', 'vue'
// - Unicode: '日本語'
// - Alphanumeric: 'ES2020', 'UTF8'
// - With hyphens: 'type-safe' (if valid domain format)
```
--------------------------------
### Register Custom Plugins with linkify.registerPlugin()
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Enables the extension of link detection capabilities by registering custom plugins. These plugins interact with the library's scanner and parser state machines to define new types of links, such as ticket identifiers.
```javascript
import * as linkify from 'linkifyjs';
// Create a custom token class for tickets (e.g., #123)
const TicketToken = linkify.createTokenClass('ticket', { isLink: true });
// Define the plugin
const ticketPlugin = ({ scanner, parser }) => {
const { POUND, groups } = scanner.tokens;
// Create state transition: # followed by numbers = ticket
const Hash = parser.start.tt(POUND);
const Ticket = new linkify.State(TicketToken);
Hash.ta(groups.numeric, Ticket);
};
// Register the plugin (must be done before first linkify call)
linkify.registerPlugin('ticket', ticketPlugin);
// Now tickets are detected
linkify.test('#123', 'ticket'); // true
linkify.find('See issue #456');
// Returns: [{ type: 'ticket', value: '#456', ... }]
```
--------------------------------
### Import linkify-plugin-ticket using ES modules
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-ticket/README.md
Imports the linkifyjs library and the ticket plugin into a JavaScript project using ES module syntax. This is an alternative to CommonJS for modern JavaScript environments.
```javascript
import * as linkify from 'linkifyjs';
import 'linkify-plugin-ticket';
```
--------------------------------
### Import linkify-plugin-ticket using require
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-plugin-ticket/README.md
Imports the linkifyjs library and the ticket plugin into a JavaScript project using the CommonJS require syntax. This makes the plugin's functionality available.
```javascript
const linkify = require('linkifyjs')
require('linkify-plugin-ticket');
```
--------------------------------
### Clean Generated Files with NPM
Source: https://github.com/nfrasser/linkifyjs/blob/main/CONTRIBUTING.md
Removes all files generated during the build and development process. This is useful for ensuring a clean state before a new build or for troubleshooting.
```bash
npm run clean
```
--------------------------------
### Convert Links in HTML with linkify-html
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Processes HTML strings to detect and convert links within text content while preserving the existing HTML structure. It intelligently skips anchor tags and handles HTML entities, offering options for customization like default protocols, target attributes, and class names.
```javascript
import linkifyHtml from 'linkify-html';
// Basic usage
const html = '
Visit github.com or email test@example.com
';
const result = linkifyHtml(html);
// Returns:
// 'Visit github.com or email test@example.com
'
// With options
const options = {
defaultProtocol: 'https',
target: '_blank',
rel: 'noopener noreferrer',
className: 'external-link'
};
linkifyHtml('Check out example.com today!', options);
// Returns:
// 'Check out example.com today!'
// Ignore specific tags
linkifyHtml('http://example.com and http://other.com', {
ignoreTags: ['code', 'pre', 'script']
});
// Only linkifies http://other.com, preserves code content
// Custom formatting
linkifyHtml('Visit verylongdomainname.com', {
truncate: 20,
format: (value, type) => type === 'url' ? `Link: ${value}` : value
});
// Convert newlines to
tags
linkifyHtml('Line 1\nLine 2\nhttp://example.com', { nl2br: true });
// Returns: 'Line 1
Line 2
http://example.com'
```
--------------------------------
### linkify.tokenize() - Parse String Into Tokens
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Parses a string into an array of tokens representing linkable and non-linkable segments. Used internally by other functions but available for advanced use cases.
```APIDOC
## linkify.tokenize()
### Description
Parses a string into an array of tokens representing linkable and non-linkable segments. Used internally by other functions but available for advanced use cases.
### Method
`linkify.tokenize(text)`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
import * as linkify from 'linkifyjs';
const tokens = linkify.tokenize('Hello world@example.com!');
tokens.forEach(token => {
console.log(`Type: ${token.t}, Value: ${token.v}, Is Link: ${token.isLink}`);
if (token.isLink) {
console.log(`Href: ${token.toHref()}`);
}
});
```
### Response
#### Success Response (200)
An array of token objects. Each token object has:
- **t** (string) - The type of the token ('text' for non-linkable, or the link type like 'email', 'url').
- **v** (string) - The value of the token.
- **isLink** (boolean) - True if the token represents a link, false otherwise.
- **toHref()** (function) - A method available on link tokens to generate the href attribute.
#### Response Example
```json
[
{ "t": "text", "v": "Hello ", "isLink": false },
{ "t": "email", "v": "world@example.com", "isLink": true },
{ "t": "text", "v": "!", "isLink": false }
]
```
```
--------------------------------
### Render Linkify component
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-react/README.md
Shows the basic usage of the Linkify component in a React application to automatically detect and linkify URLs within a string.
```jsx
const contents = 'helloworld.com';
{contents}
```
--------------------------------
### Linkify Text Content
Source: https://github.com/nfrasser/linkifyjs/blob/main/test/spec/html/linkified.html
Demonstrates the identification of various URL patterns within a text block. It processes FTP links, localhost addresses, and standard domain names to prepare them for conversion into anchor tags.
```javascript
const text = "Hello here are some links to ftp://awesome.com/?where=this and localhost:8080, pretty neat right?";
const linkified = linkifyStr(text);
console.log(linkified);
```
```javascript
const nestedText = "github.com/Hypercontext/linkifyjs";
const result = linkifyStr(nestedText, { defaultProtocol: 'https' });
```
--------------------------------
### Linkify Component Usage
Source: https://github.com/nfrasser/linkifyjs/blob/main/packages/linkify-react/README.md
How to implement the Linkify component in a React application to automatically detect and linkify URLs and emails.
```APIDOC
## Linkify Component
### Description
The Linkify component parses its children and replaces detected URLs, email addresses, and other patterns with elements.
### Usage
Wrap the text content you wish to process inside the `` component.
### Parameters
#### Props
- **options** (object) - Optional - Configuration object for linkifyjs behavior (e.g., target, rel, format).
### Request Example
```jsx
Visit us at google.com
```
### Response
#### Output
- **Rendered HTML** - The component renders a string where detected links are wrapped in tags.
```
--------------------------------
### Hashtag Plugin
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Enables detection of hashtags in text, supporting Unicode characters and emoji. Allows custom href formatting.
```APIDOC
## Hashtag Plugin
### Description
Detects hashtags (e.g., #example) in text. Supports Unicode and emoji characters within hashtags. Provides options for custom URL formatting and CSS classes.
### Method
`linkify.find()` and `linkify.test()` with type 'hashtag'
### Endpoint
N/A (This is a plugin for the linkifyjs library)
### Parameters
#### Request Body
N/A
### Request Example
```javascript
import * as linkify from 'linkifyjs';
import 'linkify-plugin-hashtag';
linkify.find('Check out #react and #nodejs');
// Returns: [{ type: 'hashtag', value: '#react', ... }, { type: 'hashtag', value: '#nodejs', ... }]
const options = {
formatHref: {
hashtag: (href) => `https://twitter.com/hashtag/${href.slice(1)}`
},
className: {
hashtag: 'hashtag-link'
}
};
linkifyHtml('Trending: #AI #ML #DataScience', options);
```
### Response
#### Success Response (200)
Returns an array of objects, each representing a detected hashtag with properties like `type`, `value`, and `href`.
#### Response Example
```json
[
{ "type": "hashtag", "value": "#react", "href": "#react", ... },
{ "type": "hashtag", "value": "#nodejs", "href": "#nodejs", ... }
]
```
```
--------------------------------
### Parse strings into tokens using linkify.tokenize()
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Decomposes a string into an array of token objects, distinguishing between linkable and non-linkable segments. This is useful for advanced text processing and custom rendering logic.
```javascript
import * as linkify from 'linkifyjs';
const tokens = linkify.tokenize('Hello world@example.com!');
tokens.forEach(token => {
console.log(`Type: ${token.t}, Value: ${token.v}, Is Link: ${token.isLink}`);
if (token.isLink) {
console.log(`Href: ${token.toHref()}`);
}
});
```
--------------------------------
### Mention Plugin
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Enables detection of @mentions in text, supporting various username formats and custom href formatting for platforms like Twitter and GitHub.
```APIDOC
## Mention Plugin
### Description
Detects mentions (e.g., @username) in text. Supports usernames with hyphens and underscores, as well as organization/repo patterns (e.g., @user/repo). Allows custom URL formatting for different platforms.
### Method
`linkify.find()` and `linkify.test()` with type 'mention'
### Endpoint
N/A (This is a plugin for the linkifyjs library)
### Parameters
#### Request Body
N/A
### Request Example
```javascript
import * as linkify from 'linkifyjs';
import 'linkify-plugin-mention';
linkify.find('Thanks @john-doe and @jane_doe!');
// Returns: [{ type: 'mention', value: '@john-doe', ... }, { type: 'mention', value: '@jane_doe', ... }]
const twitterOptions = {
formatHref: {
mention: (href) => `https://twitter.com${href}`
}
};
linkifyHtml('Follow @anthropic', twitterOptions);
// Returns: 'Follow @anthropic'
linkify.find('See @facebook/react for details');
// Detects @facebook/react as a single mention
```
### Response
#### Success Response (200)
Returns an array of objects, each representing a detected mention with properties like `type`, `value`, and `href`.
#### Response Example
```json
[
{ "type": "mention", "value": "@john-doe", "href": "/john-doe", ... },
{ "type": "mention", "value": "@jane_doe", "href": "/jane_doe", ... }
]
```
```
--------------------------------
### Ticket Plugin
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Enables detection of ticket/issue references (e.g., #123) for linking to issue trackers. Supports custom href formatting for platforms like GitHub and Jira.
```APIDOC
## Ticket Plugin
### Description
Detects ticket or issue references (e.g., #123) in text. Primarily designed for linking to issue tracking systems. Requires numeric values after the '#'. Supports custom URL formatting.
### Method
`linkify.find()` and `linkify.test()` with type 'ticket'
### Endpoint
N/A (This is a plugin for the linkifyjs library)
### Parameters
#### Request Body
N/A
### Request Example
```javascript
import * as linkify from 'linkifyjs';
import 'linkify-plugin-ticket';
linkify.test('#123', 'ticket'); // true
linkify.test('#abc', 'ticket'); // false
linkify.find('Fixed in #42, see also #100');
// Returns: [{ type: 'ticket', value: '#42', ... }, { type: 'ticket', value: '#100', ... }]
const githubOptions = {
formatHref: {
ticket: (href) => `https://github.com/nfrasser/linkifyjs/issues/${href.slice(1)}`
},
className: 'issue-link'
};
linkifyHtml('Closes #42', githubOptions);
// Returns: 'Closes #42'
```
### Response
#### Success Response (200)
Returns an array of objects, each representing a detected ticket reference with properties like `type`, `value`, and `href`.
#### Response Example
```json
[
{ "type": "ticket", "value": "#42", "href": "#42", ... },
{ "type": "ticket", "value": "#100", "href": "#100", ... }
]
```
```
--------------------------------
### Find links in text using linkify.find()
Source: https://context7.com/nfrasser/linkifyjs/llms.txt
Scans a string to extract all detected links, supporting filtering by type, truncation options, and custom validation logic. It returns an array of objects containing link metadata such as type, value, and position.
```javascript
import * as linkify from 'linkifyjs';
const text = 'Contact us at support@example.com or visit https://example.com for more info';
const links = linkify.find(text);
const emails = linkify.find('Visit github.com or email test@example.com', 'email');
const truncated = linkify.find('Check out www.verylongdomainname.com today', { truncate: 15 });
const validated = linkify.find('foo.com and spam.com and bar.com', {
validate: (url) => url !== 'spam.com'
});
```
--------------------------------
### Convert Text to HTML Links
Source: https://github.com/nfrasser/linkifyjs/blob/main/README.md
Uses linkifyHtml to parse a string and convert detected URLs and email addresses into anchor tags with specified options.
```javascript
const options = { defaultProtocol: 'https' };
linkifyHtml('Any links to github.com here? If not, contact test@example.com', options);
```