如何使用javascript将URL(网站，电子邮件)从字符串转换为html标签

本文概述

• 快速实施
• 使用库(Linkify.js)

快速实施

如果你想将文本url快速转换为可点击的链接(在dom或字符串中), 则需要知道这对你自己来说并不是一件容易的事。 URI很复杂, 在数百万种情况下, 你自已实现的功能可能会失败。例如 ：

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:, .;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2, 6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText;
}

先前的功能可以使用, 但是有更好的方法可以完成此任务。

使用库(Linkify.js)

好吧, 第一点是干净且实用, 但在某些情况下可能会失败。我们建议你使用一个可以为你完成所有工作的库, 而不是让你费神学习如何处理字符串和搜索url。

我们正在谈论Linkify.js。 Linkify是一个JavaScript插件, 用于查找纯文本链接并将其转换为HTML <a>标签。它适用于所有有效的Web URL和电子邮件地址。要将linkify包含在你的项目中, 请访问主页并下载发行版(或使用npm或bower), 并将脚本包含在文档中：

<!-- Linkify Core -->
<script src="linkify.min.js"></script>

<!-- If you want to use the jquery module include this script -->
<script src="linkify-jquery.min.js"></script>

Linkify提供了多种初始化方法, 使用jQuery可以直接转换链接中的DOM内容, 例如：

<div id="linkDemo">
  Visit ourcodeworld.com , it has a lot of interesting content. You can contact us writing to dev@ourcodeworld.com
</div>

<script>
  $("#linkDemo").linkify({
    target:"_blank"
  });
</script>

应该输出：

访问ourcodeworld.com, 它有很多有趣的内容。你可以写信给dev@ourcodeworld.com与我们联系。

或仅使用没有jQuery的linkify核心(在此处了解有关模式的更多信息)：

<div id="linkDemo"></div>

<script>
  var str = '<p>For help with GitHub.com, please email support@github.com</p>';
  var processedContent = linkifyStr(str, options);
  // or
  // var processedContent = str.linkify();

  document.getElementById("linkDemo").innerHTML = processedContent;  
</script>

你可以在官方主页上测试自己的文本, 玩得开心！