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 相关文章推荐
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 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 存储文本换行实现方法
2010/01/05 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
python3.7 的新特性详解
2019/07/25 Python
python生成器推导式用法简单示例
2019/10/08 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
幼儿教师考核制度
2014/01/25 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
生产操作工岗位职责
2014/09/16 职场文书
英文道歉信
2015/01/20 职场文书
预备党员考察意见范文
2015/06/01 职场文书
投诉书范文
2015/07/02 职场文书
python数字图像处理:图像的绘制
2022/06/28 Python