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 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
JavaScript实现滑块验证解锁
Jan 07 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 zip文件解压类代码
2009/12/02 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
利用python求相邻数的方法示例
2017/08/18 Python
python得到电脑的开机时间方法
2018/10/15 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
2014年节能工作总结
2014/12/18 职场文书
2015年林业工作总结
2015/05/14 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
MySql分区类型及创建分区的方法
2022/04/13 MySQL
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS