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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
Vue中使用vux的配置详解
May 05 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 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
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
常用js脚本
2006/12/03 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python中的urllib模块使用详解
2015/07/07 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
总经理助理的八要求
2013/11/12 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
年度考核评语
2014/01/19 职场文书
国培计划培训感言
2014/03/11 职场文书
英语教师自荐信
2014/05/26 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
基层党支部整改方案
2014/10/25 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2014年工商所工作总结
2014/12/09 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python