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 相关文章推荐
juqery 学习之五 文档处理 插入
Feb 11 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 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读取msn上的用户信息类
2008/12/05 PHP
php网站地图生成类示例
2014/01/13 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript 获取图片颜色
2009/04/05 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
axios学习教程全攻略
2017/03/26 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python发送伪造的arp请求
2014/01/09 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python中如何使用insert函数
2020/01/09 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
国际象棋商店:The Chess Store
2018/07/09 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
18岁生日感言
2014/01/12 职场文书
2014全国两会心得体会
2014/03/17 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
JavaScript ES6的函数拓展
2022/01/18 Javascript
idea下配置tomcat避坑详解
2022/04/12 Servers