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 prototype属性使用说明
May 13 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
Ionic快速安装教程
Jun 03 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
js实现验证码功能
Jul 24 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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里得到前天和昨天的日期的代码
2007/08/16 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python 写一个水果忍者游戏
2021/01/13 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
大专生工程监理求职信
2013/10/04 职场文书
在职研究生自我鉴定
2013/10/16 职场文书
白酒业务员岗位职责
2013/12/27 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
户外亲子活动总结
2015/05/08 职场文书
党小组考察意见
2015/06/02 职场文书
门卫管理制度范本
2015/08/05 职场文书
医德医风学习心得体会
2016/01/25 职场文书
话题作文之自信作文
2019/11/15 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js