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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
vue实现商城购物车功能
Nov 27 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue自定义指令实现方法详解
Feb 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP微信红包API接口
2015/12/05 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
js window.event对象详尽解析
2009/02/17 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
Python随机函数random()使用方法小结
2018/04/29 Python
简单了解django orm中介模型
2019/07/30 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
教师简历自我评价
2014/02/03 职场文书
初中班主任寄语
2014/04/04 职场文书
音乐教师求职信
2014/06/28 职场文书
Python 图片添加美颜效果
2022/04/28 Python