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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
Vue vm.$attrs使用场景详解
Mar 08 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批量生成缩略图的代码
2008/07/19 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php发送邮件的问题详解
2015/06/22 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
Python使用redis pool的一种单例实现方式
2016/04/16 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
如何开启linux的ssh服务
2015/02/14 面试题
控制工程专业个人求职信
2013/09/25 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
第一节英语课开场白
2015/06/01 职场文书
2016年教师节慰问信
2015/12/01 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python