Plaint Text To HTML Link Converter – Anchorme.js

Category: Javascript , Recommended , Text | May 9, 2020
Author: alexcorvi
Views Total: 91 views
Official Page: Go to website
Last Update: May 9, 2020
License: MIT

Preview:

Plaint Text To HTML Link Converter – Anchorme.js

Description:

Anchorme.js is simple yet robust JavaScript library that finds URs, IPs, files and email addresses in your plain text and convert them into clickable html links. Works with Node.js and browser.

Installation:

# NPM
$ npm install anchorme

How to use it:

// NPM
var anchorme = require("anchorme").default; 

// ES6 / Typescript style imports
import anchorme from "anchorme";

Or directly include the JavaScript anchorme.js on the webpage.

<script src="dist/browser/anchorme.min.js"></script>

Basic usage:

const input = "Visit cssscript.com";
anchorme(input, option);

Possible options to config the converter.

anchorme(input,{

  // addiontal link attributes
 attributes: {
    target: "_blank",
    class: "some-class"
  },

  // truncate links
  // setting to 10 means any link above 10 characters will be truncated
  truncate: Infinity,

  // characters will be taken out of the middle
  middleTruncation: true,

  // exclude strings
  // Emails & files will be excluded
  exclude: function(string) {
      if (anchorme.validate.email(string)) {
          return true;
      } else if (string.startsWith("file:///")) {
          return true;
      } else {
          return false;
      }
  }

  // default protocol
  // http:// for URLs & mailto: for emails
  protocol: "http://",

  // specicial transform
  specialTransform: [
    {
        test: /\.img$/,
        transform: string =&gt; `&lt;a href="${string}"&gt;IMAGE FILE&lt;/a&gt;`
    },
    {
        test: /^http:\/\//,
        transform: () =&gt; `&lt;a href="${string}"&gt;INSECURE URL&lt;/a&gt;`
    }
  ],

})

Extend the Anchorme.js.

anchorme({
  input,
  // use some options
  options: {
    attributes: {
      target: "_blank",
      class: "detected",
    },
  },
  // and extensions
  extensions: [
    // an extension for hashtag search
    {
      test: /#(\w|_)+/gi,
      transform: (string) =>
          `<a href="https://a.b?s=${string.substr(1)}">${string}</a>`,
    },
    // an extension for mentions
    {
      test: /@(\w|_)+/gi,
      transform: (string) =>
          `<a href="https://a.b/${string.substr(1)}">${string}</a>`,
    },
  ],
});

List all matches in an array.

anchorme.list(
  `github.com bing.com 127.0.0.1 [email protected] file:///c:/file.zip`
);

=>

[
  { "start": 0, "end": 10, "string": "github.com" },
  { "start": 11, "end": 19, "string": "bing.com" },
  { "start": 20, "end": 29, "string": "127.0.0.1" },
  { "start": 30, "end": 46, "string": "[email protected]" },
  { "start": 47, "end": 66, "string": "file:///c:/file.zip" }
]

Validate given strings.

anchorme.validate.email("[email protected]"); // true
anchorme.validate.email("[email protected]@example.com"); // false
anchorme.validate.url("github.com/some/path"); // true
anchorme.validate.url("127.0.1.1"); // true
anchorme.validate.url("127.0.1.1:8000/some/path"); // true
anchorme.validate.url("127.0.1.300"); // false
anchorme.validate.url("127.0.1.500:8000/some/path"); // false
anchorme.validate.ip("127.0.1.1"); // true
anchorme.validate.ip("127.0.1.1/path"); // false (only validates pure IPs - not URLs)
anchorme.validate.ip("127.400.1.1"); // false
anchorme.validate.ip("777.0.1.1:8000/some/path"); // false
anchorme.validate.file("file:///c:/some/file.zip"); // true

Changelog:

v2.1.1 (05/09/2020)

  • The ‘list’ options is exposing a lot more information about the listed token.
  • ‘conditional’ options (those options parameters that passes a function as the value) are receiving a second argument now, exposing a lot more information about the token.
  • Bug fixes

v2.0 (04/03/2020)

  • Update

You Might Be Interested In:


Leave a Reply