JavaScript Convert Link Text To Html


Install linkifyjs.

npm install linkifyjs --save

Covert link (with out without http://) to HTML.

import linkifyHtml from 'linkifyjs/html'const str = 'Visit or, BYE!'const html = linkifyHtml(str, { className: 'link' })console.log(html)
Visit <a href="" class="link" target="_blank"></a> or <a href="" class="link" target="_blank"></a>, BYE!

Some link is too long, you might want to shorten it to….

const str = 'Display shorter url:, BYE!'const html = linkifyHtml(str, { className: 'link', format: (value, type) =>  {    if (type === 'url' && value.length > 30) {      value = value.slice(0, 30) + '…'    }    return value  }})console.log(html)
Display shorter url: <a href="" class="link" target="_blank">…</a>, BYE!


twitter-text is capable of identifying and linking url, @username, #hastag and $cashtag.


npm install twitter-text --save


import twitterText from 'twitter-text'const str = 'Visit or, BYE!'const html = twitterText.autoLinkUrlsCustom(str)console.log(html)


Visit or <a href="" rel="nofollow"></a>, BYE!

Note: auto link URL works for but not

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.