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 相关文章推荐
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
浅析JS运动
Dec 28 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
vue中轮训器的使用
Jan 27 Javascript
node-red File读取好保存实例讲解
Sep 11 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
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
日化店促销方案
2014/03/26 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
2014年加油站工作总结
2014/12/04 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript