### 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}`; }, // 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); ```