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实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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+mysql事务rollback&amp;commit示例
2010/02/08 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
input按钮的事件处理大全
2010/12/10 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
八大排序算法的Python实现
2021/01/28 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python实现点云投影到平面显示
2020/01/18 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
如何对python的字典进行排序
2020/06/19 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
金智子午JAVA面试题
2015/09/04 面试题
工程测量与监理专业应届生求职信
2013/11/27 职场文书
财经学院自荐信范文
2014/02/02 职场文书
安全月活动总结
2014/05/05 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
慰问信范文
2015/02/14 职场文书
医学生自荐信范文
2015/03/05 职场文书
工作年限证明模板
2015/06/15 职场文书