javascript自动给文本url地址增加链接的方法分享


Posted in Javascript onJanuary 20, 2014

URL地址自动添加的实现其实就是那么点内容:检测与替换。

检测

“检测”就是检测文字(字符串)内部是否有符合http地址的内容,显然,这需要用到正则表达式进行验证,这个工作前端和后台都可以做,这里,只讲前端的方法,使用JavaScript实现。

验证HTTP地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正):

var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g;

前一部分匹配http或是https开头的URL字符串地址,后面一部分匹配一些字符,英文字符、下划线(_)、点号(.)、问号(?)以及等号(=),连接短线(-)等。

替换 3water.com
说到JavaScript中的替换功能,首先想到的自然是replace属性了,replace属性强大之处在于其支持正则表达式,可以对符合正则的字符串进行替换。例如,我们要替换掉字符串两端的空格就可以使用类似下面的语句:

var s = " blank ";
s = s.replace(/^s+(.*?)s+$/, "");
alert(s);

就会得到”blank”,两端的空格被剔除了。同样的,这里只要将匹配的http地址替换成<a>标签嵌套的含有href属性的http地址就可以了

例,这个表达式可以匹配 http,https,ftp,ftps以及IP地址的URL地址。

var URL = /(https?://|ftps?://)?((d{1,3}.d{1,3}.d{1,3}.d{1,3})(:[0-9]+)?|([w]+.)(S+)(w{2,4})(:[0-9]+)?)(/?([w#!:.?+=&%@!-/]+))?/ig;

还算是URL地址匹配计较完善的。利用这个表达式我写了两个小函数,将用户留言的URL地址替换成可点击的链接,没有什么太难的,就是利用JavaScript 的 replace() 函数来实现替换 URL 为 link:

/**
 * JavaScrit 版本
 * 将URL地址转化为完整的A标签链接代码
 */
var replaceURLToLink = function (text) {
        text = text.replace(URL, function (url) {
            var urlText = url;
            if (!url.match('^https?://')) {
                url = 'http://' + url;
            }
            return '' + urlText + '';
        });
        return text;
    };
Javascript 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 #Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 #Javascript
文本框文本自动补全效果示例分享
Jan 19 #Javascript
不使用jquery实现js打字效果示例分享
Jan 19 #Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 #Javascript
js取float型小数点后两位数的方法
Jan 18 #Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 #Javascript
You might like
PHP缓存技术的使用说明
2011/08/06 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
php实现多城市切换特效
2015/08/09 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
小区门卫管理制度
2014/01/29 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android