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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
js读取注册表的键值示例
Sep 25 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
python操作CouchDB的方法
2014/10/08 Python
Python 字典与字符串的互转实例
2017/01/13 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
新闻传媒系求职信范文
2014/04/19 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
法制演讲稿
2014/09/10 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
签订劳动合同通知书
2015/04/16 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
宪法宣传标语100条
2019/10/15 职场文书