JS识别网址文本并转为链接文本

现在前端开发用什么框架 高级前端开发视频教程下载 前端开发小图标插件

需求:用户之间发送消息时,如果发送者输入的信息中含有网址文本,要在接受者界面中显示网址链接,点击该链接直接跳转到网页。
这个功能和 QQ 发送网址文本的效果非常像,可以说是一模一样的。

大致过程:首先,要判断文本中是否含有网址文本,其次,将网址文本转换为可点击的链接文本。

判断网址

在 javaScript 中判断某种特殊格式的文本,首选正则表达式,下面是我用来检查网址的正则:

var re = /(http|ftp|https):\/\/[\w-]+(.[\w-]+)+([\w-.,@?^=%&:/~+#]*[\w-\@?^=%&/~+#])?/g;

这里需要注意的是,正则必须使用全局匹配 g 。否则只能匹配到文本中的第一个网址文本。

网址转换

在网址转换中涉及字符串的操作,那么自然要使用 String 对象的方法,先复习下 String 对象能与正则表达式一起使用的方法有哪些?
常用的有这几个:

search:检索与正则表达式相匹配的值。
match:找到一个或多个正则表达式的匹配。
replace:替换与正则表达式匹配的子串。
split:把字符串分割为字符串数组。

可以看出来,其中 replace 是最方便、最适合这个需求的。至于 replace 的使用方法我就不介绍了,大家自行去找教程吧!

直接上代码:
str = str.replace(re,function(website){
return “<a href='” + website +”‘ target=’_blank’>” + website + “</a>”;
});

将上面两个过程,封装成函数:
var linkToURL = function(str){
var re = /(http|ftp|https):\/\/[\w-]+(.[\w-]+)+([\w-.,@?^=%&:/~+#]*[\w-\@?^=%&/~+#])?/g;
str = str.replace(re,function(website){
return “<a href='” + website +”‘ target=’_blank’>” + website + “</a>”;
});
return str;
};

前端和移动开发基础课程 web前端开发常用插件 前端开发招聘西安

» 本文来自:前端开发者 » 《JS识别网址文本并转为链接文本》
» 本文链接地址:https://www.rokub.com/5365.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!