JavaScript实现url地址自动检测并添加URL链接示例代码


Posted in Javascript onNovember 12, 2013

背景:写一个简单的聊天系统,发出Htpp的Url实现跳转加上a标签。
实现代码:

String.prototype.httpHtml = function(){ 
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; 
return this.replace(reg, '<a target=_blank href="$1$2">$1$2</a>'); 
};

摘录:
URL地址自动添加的实现
URL地址自动添加的实现其实就是那么点内容:检测与替换。

检测
“检测”就是检测文字(字符串)内部是否有符合http地址的内容,显然,这需要用到正则表达式进行验证,这个工作前端和后台都可以做,这里,只讲前端的方法,使用JavaScript实现。
验证HTTP地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正):
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
前一部分匹配http或是https开头的URL字符串地址,后面一部分匹配一些字符,英文字符、下划线(_)、点号(.)、问号(?)以及等号(=),连接短线(-)等。

替换
说到JavaScript中的替换功能,首先想到的自然是replace属性了,replace属性强大之处在于其支持正则表达式,可以对符合正则的字符串进行替换。例如,我们要替换掉字符串两端的空格就可以使用类似下面的语句:

var s = " blank "; 
s = s.replace(/^\s+(.*?)\s+$/, ""); 
alert(s);
Javascript 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JS运算符优先级与表达式示例详解
Sep 04 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 #Javascript
屏蔽script注入小例子
Nov 12 #Javascript
js控制淡入淡出示例代码
Nov 12 #Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 #Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 #Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 #Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 #Javascript
You might like
Zend 输出产生XML解析错误
2009/03/03 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
python中执行shell的两种方法总结
2017/01/10 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
手写一个python迭代器过程详解
2019/08/27 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
大学生学雷锋活动总结
2014/06/26 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
西安大雁塔导游词
2015/02/10 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
利用python做表格数据处理
2021/04/13 Python