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

本文概述

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

快速实施【如何使用javascript将URL(网站，电子邮件)从字符串转换为html标签】如果你想将文本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="http://www.srcmini.com/$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="http://www.srcmini.com/linkify.min.js"> < /script> < !-- If you want to use the jquery module include this script --> < script src="http://www.srcmini.com/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>

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