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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
js href的用法
May 13 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
DOM事件探秘篇
Feb 15 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
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/06/04 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
Python Nose框架编写测试用例方法
2017/10/26 Python
Python贪心算法实例小结
2018/04/22 Python
python读取文本中的坐标方法
2018/10/14 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
Python多线程的退出控制实现
2020/08/10 Python
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
总经理秘书工作职责
2013/12/26 职场文书
中学生打架检讨书
2014/02/10 职场文书
一月红领巾广播稿
2014/02/11 职场文书
财务总经理岗位职责
2014/02/16 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
如何通过cmd 连接阿里云服务器
2022/04/18 Servers