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 onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
巧用canvas
Jan 21 Javascript
基于node.js之调试器详解
Aug 22 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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数据库配置文件一般做法分享
2012/07/07 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python数据结构之链表的实例讲解
2017/07/25 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python中@contextmanager实例用法
2021/02/07 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
组织生活会发言材料
2014/12/15 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书