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页面模板库handlebars的简单用法
Mar 02 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
JavaScript实现横版菜单栏
Mar 17 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
虫族 ZERG 概述
2020/03/14 星际争霸
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP实现文件安全下载
2006/10/09 PHP
PHP Pear 安装及使用
2009/03/19 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
django中嵌套的try-except实例
2020/05/21 Python
python调用摄像头的示例代码
2020/09/28 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
生物科学专业职业规划书范文
2014/02/11 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
培训班主持词
2014/03/28 职场文书
合同协议书格式
2014/04/18 职场文书
省文明单位申报材料
2014/05/08 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
项目战略合作意向书
2015/05/08 职场文书
大学生活感想
2015/08/10 职场文书