Linkify jQuery

Linkify jQuery is a plugin for the jQuery library that automatically detects and converts plain text URLs and email addresses into clickable links. It is used to make URLs and email addresses clickable within HTML content, improving user experience, and usability.

Uses of Linkify-jQuery

• Improves user experience: It improves user experience by making users navigate to external websites or compose emails by automatically converting plain text URLs and email addresses into clickable links.
• Improving Readability: It improves the readability of web pages by making users easier to recognize and interact with links within the content of the web page.
• Reduce Development Time: Linkify jQuery makes the task of identifying and converting URLs and email addresses into clickable links, which saves the time and effort of developers in manually coding these links.
• Cross-browser Compatibility: Linkify jQuery can work on different web browsers, giving the same behavior for link converting irrespective of the browser.

Advantages of Linkify jQuery

1. Automatic link creation: to add <a> tag around every URL and email in an HTML file previously but now it will automatically get converted. And simplifies email connection by converting email addresses into clickable mailto links, which provides easy communication and user outreach.

1. Enhanced User Experience: Improves user experience by improving readability because of the different looks of clickable links, its colour will be changed and improves visual appeal. It also Improves user interaction to discover related resources or connect with you and provide a smoother user experience, linkify helps convert to clickable links that can navigate to an external website or another page.
2. Customization Power: The Developer can customize the appearance of the clickable link that was converted by Linkify and the developer can change the colour and theme of the link same as their website design and theme. Developers can also customize the behaviour of links (like opening in a new tab), target specific domains, etc.
3. Cross-Browser Compatibility: Linkify is built on top of jQuery, which is a widely used JavaScript library, which makes it compatible with various web development frameworks and platforms. So this is compatible across different browsers. This is a plus point that user can use it on any browser according to their comfort.
4. Maintainability: Using Linkify jQuery keeps your HTML clean and maintainable as we do not have to use anchor tags for every URL or email address to convert it to a checkable link. So code length will be reduced and extra tags will be removed which make the HTML file easy to understand and shorten the code length.

Disadvantage of Linkify jQuery

1. Limited Scope: Linkify only focus on URLs and email addresses to be converted to clickable links and it does not focus on other linkable entities such as phone numbers, social media handles, etc. which limits developers to convert other entities to clickable links.
2. Wrong link creation: It is also possible that Linkify jQuery may not always accurately determine the URLs and email addresses that should be converted into clickable links. Linkify misinterprets text and converts it into a real link, which leads to unexpected behaviour. For example, it might incorrectly identify non-URL text as a link and convert it into a clickable link and when we click on that link it shows an error.
3. Dependency on jQuery: Linkify jQuery depends on the jQuery library. And if your project is not using jQuery then adding jQuery just for creating links might add unnecessary overhead. For example, if your project is not based on jQuery and you are doing it in another language then adding linkify jQuery just to convert text URLs and email addresses into clickable links is an unnecessary effort.
4. Performance issue with Dynamic Content: If your project is dynamic in which the content of your website is changing dynamically and frequently updates then continuously applying Linkify jQuery to entire dynamically changing content becomes inefficient and if your website content is too large then it is difficult to use linkify effectively.

Example: To demonstrate converting any text URL to checkable links with the help of Linkify.

Javascript

function linkify(string, buildHashtagUrl, includeW3, target, noFollow) {
  var relNoFollow = "";
  if (noFollow) {
    relNoFollow = ' rel="nofollow"';
  }

  if (string.toLowerCase().indexOf("www.") === 0 && includeW3) {
    string =
      '<a href="http://' +
      string +
      '" target="' +
      target +
      '"' +
      relNoFollow +
      ">" +
      string +
      "</a>";
  } else {
    string =
      '<a href="' +
      string +
      '" target="' +
      target +
      '"' +
      relNoFollow +
      ">" +
      string +
      "</a>";
  }

  if (buildHashtagUrl) {
    string = string.replace(
      /\B#(\w+)/g,
      '<a href="' +
        buildHashtagUrl("$1") +
        '" target="' +
        target +
        '"' +
        relNoFollow +
        ">#$1</a>"
    );
  }
  return string;
}

function linkifyContent() {
  var editableContent = document.getElementById("editableContent");
  var content = editableContent.textContent;
  var output = "";
  var regex = /((http|https|ftp):\/\/|\bwww\.)[^\s<]+/gi;
  output = content.replace(regex, function (match) {
    return linkify(match, null, true, "_self", false);
  });
  output = output.replace(/\B#(\w+)/g, function (match, hashtag) {
    return linkify(
      match,
      function (hashtag) {
        return "http://myservice.com/search?q=" + hashtag;
      },
      true,
      "_self",
      false
    );
  });

  document.getElementById("content").innerHTML = output;
}

document
  .getElementById("linkifyButton")
  .addEventListener("click", linkifyContent);

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Linkify Example</title>
    <link rel="stylesheet" type="text/css" href="linkify.css" />
  </head>
  <body style="text-align: center" ;>
    <div id="contentBox">
      <h2 style="color: green">GeeksforGeeks</h2>
      <h3>Linkify Example</h3>
      <div id="editableContent" contenteditable="true">
        Check geeksforgeeks jquery-tutorial page
        https://www.geeksforgeeks.org/jquery-tutorial/
      </div>
      <br />
      <button id="linkifyButton">Linkify</button>
      <br />
      <div id="content"></div>
    </div>
    <script src="linkify.js"></script>
  </body>
</html>

CSS

.title {
  color: green;
  text-align: center;
}

h3 {
  text-align: center;
}

canvas {
  display: block;
  margin: auto;
  border: 2px solid black;
  background-color: #ffffff;
}

Output:

Converting a text to a clickable URL link.