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 复制数组实现代码
Nov 26 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
iScroll.js 使用方法参考
May 16 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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
桌面中心(二)数据库写入
2006/10/09 PHP
基于文本的访客签到簿
2006/10/09 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
php 短链接算法收集与分析
2011/12/30 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
详解Python中的测试工具
2019/06/09 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
python绘制动态曲线教程
2020/02/24 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
视图的作用
2014/12/19 面试题
工作迟到检讨书
2014/02/21 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS