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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
JavaScript 作用域scope简单汇总
Oct 23 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 date()日期时间函数详解
2010/05/16 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
jquery中this的使用说明
2010/09/06 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
AngularJs directive详解及示例代码
2016/09/01 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
使用PDB简单调试Python程序简明指南
2015/04/25 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python matplotlib画图实例代码分享
2017/12/27 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
django的settings中设置中文支持的实现
2019/04/28 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
关于Python错误重试方法总结
2021/01/03 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
模特大赛策划方案
2014/05/28 职场文书
教研活动主持词
2015/07/03 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python