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技术技巧大全(五)
Jan 22 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
javascript self对象使用详解
2016/10/18 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python快排算法详解
2019/03/04 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
解决python 文本过滤和清理问题
2019/08/28 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
升学宴学生致辞
2015/09/29 职场文书
Python如何配置环境变量详解
2021/05/18 Python
MySQL 常见存储引擎的优劣
2021/06/02 MySQL