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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
layui table去掉右侧滑动条的实现方法
Sep 05 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 magic quotes的详解
2013/06/17 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
js数组的操作详解
2013/03/27 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
python基于pyDes库实现des加密的方法
2017/04/29 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python下载库的步骤方法
2019/10/12 Python
用Python解数独的方法示例
2019/10/24 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
服装设计行业个人的自我评价
2013/12/20 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
高一新生军训方案
2014/05/12 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android