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使用location.search的示例
Nov 05 Javascript
Javascript中神奇的this
Jan 20 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
AngularJS中的promise用法分析
May 19 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
JS实现手风琴特效
Nov 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python通过format函数格式化显示值
2020/10/17 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
应聘教师推荐信
2013/10/31 职场文书
外贸业务员的岗位职责
2013/11/23 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
会计顶岗实习心得
2014/01/25 职场文书
初中生自我鉴定
2014/02/04 职场文书
教师个人师德总结
2015/02/06 职场文书
党员读书活动心得体会
2016/01/14 职场文书