前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javaScript识别网址文本并转为链接文本

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

作者头像
用户6167509
发布2019-09-04 10:25:29
4.5K0
发布2019-09-04 10:25:29
举报
文章被收录于专栏:一路向前端

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

思路:首先,要判断文本中是否含有网址文本,其次,将网址文本转换为可点击的链接文本,即将网址文本通过a标签括起来。

判断网址:

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

代码语言:javascript
复制
var re = /^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?/g;

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

网址转换为链接文本:

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

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

可以看出来,其中 replace 是最方便、最适合这个需求的。

replace函数的使用方法:

语法:

代码语言:javascript
复制
string.replace(searchvalue,newvalue)

参数解析:

searchvalue:必须。规定子字符串或要替换的模式的 RegExp 对象。请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。

newvalue:必需。一个字符串值。规定了替换文本或生成替换文本的函数。

注意:第二个参数支持使用函数来制定文本替换的规则。

回顾需求,要将网址转换为a链接,那么得到的转换规则如下:

代码语言:javascript
复制
url => <a href='url' target='_blank'>url</a>

根据上面的分析过程,使用代码来描述如下:

代码语言:javascript
复制
var urlToLink = function(str){
    var re = /^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?/g; 

    str = str.replace(re, function(website){ 
        return "<a href='" + website +"' target='_blank'>" + website + "</a>"; 
    }); 
    return str;
};

到这里,javaScript识别网址文本并转为链接文本的函数接完成了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档