js URL地址自动添加的实现正则

js url地址自动添加的实现正则
url地址自动添加的实现其实就是那么点内容:检测与替换。

检测
"检测"就是检测文字(字符串)内部是否有符合http地址的内容,显然,这需要用到正则表达式进行验证,这个工作前端和后台都可以做,这里,只讲前端的方法,使用网页特效实现。

验证http地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正):

var reg = /(http://|https教程://)((w|=|?|.|/|&|-)+)/g;

前一部分匹配http或是https开头的url字符串地址,后面一部分匹配一些字符,英文字符、下划线(_)、点号(.)、问号(?)以及等号(=),连接短线(-)等。

替换
说到javascript中的替换功能,首先想到的自然是replace属性了,replace属性强大之处在于其支持正则表达式,可以对符合正则的字符串进行替换。例如,我们要替换掉字符串两端的空格就可以使用类似下面的语句:

var s = " blank ";
s = s.replace(/^s+(.*?)s+$/, "");
alert(s);

就会得到"blank",两端的空格被剔除了。同样的,这里只要将匹配的http地址替换成<a>标签嵌套的含有href属性的http地址就可以了。

现在有个问题是,如何高效的获取匹配的字符串呢。在正则表达式中,有个叫做分组及反向引用的概念。例如有个regexp构造函数,在调用了test()方法后,所有的反向引用都被保存在这个regexp构造函数中,从regexp.$1(它保存了第一个反向引用)开始,如果还有第二个反向引用,就是regexp.$2,如果还有第三个,就是regexp.$3,依次类推。

反向引用也可以用在string对象的replace方法中,也就是本文用到的字符串替换的方法中,所以我们就可以使用$1 $2来获取正则表达式的分组内容,实现高效的正则替换。参见如下代码:

var v = "欢迎访问我的个人网站:";
v = v.replace(reg, "<a href='$1$2'>$1$2</a>"); //这里的reg就是上面的正则表达式
alert(v);

结果会弹出类似下图的结果:

组合与提炼
根据上面的一些分析,现在我们可以把替换http://字符串的方法提炼出来,写成可继承的形式,见如下代码(方法名为httphtml,适应于所有字符串):

string.prototype.httphtml = function(){
 var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g;
 return this.replace(reg, '<a href="$1$2">$1$2</a>');
};

var v = "欢迎访问我的个人网站:http://www.111cn.net/";
alert(v.httphtml());
结果这段代码显示的结果与上图几乎一致(引号的差异):

时间: 2024-11-01 05:10:52

js URL地址自动添加的实现正则的相关文章

JavaScript实现url地址自动检测并添加URL链接示例代码_javascript技巧

背景:写一个简单的聊天系统,发出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地

asp.net通过HttpModule自动在Url地址上添加参数_实用技巧

然而手机客户端又不支持Session和Cookie传值,其他方法给页面赋值再传值显得太麻烦了,而且还不易维护,容易弄丢出错,于是想到了用HttpModule来把cid参数赋在Url地址上,让url把cid参数每页自动传递下去,需要用cid时只要通过Requet["cid"]获取,这样就不用为传值而烦恼了. 以下是配置方法和源码. 1)在web.config配置文件中添加以下节点 复制代码 代码如下: <httpModules> <add name="Http

WordPress给文章里的URL地址自动生成超链接

  在WordPress里写文章的时候,有时候会需要添加一些URL地址,比如outsiderla.me. 但是WordPress并不能自动识别这个地址,所以显示给读者的只是一个普通文本形式的URL地址,通常我们需要通过所见即所得编辑器来给这个地址添加超链接. 不过实际上WordPress提供了一个可识别URL地址的函数--make_clickable,只要激活这个函数,当你再次输入URL地址时,读者看到的就是一个带有超链接的URL地址了. 打开functions.php文件,在里面加上: add

url地址自动加#号问题说明_javascript技巧

web开发中,有时候给超链接写点击事件时候喜欢这样写: <a href="#" onclick="link();" >操作</a> 有次用jquery提交ajax请求后,当前页的url参数末尾就会自动给加个#号.开始百思不得其解,纠结了半天原来是这种写法的问题,换成 href="javascript:void(0);" 后问题不在出现. 注: # 包含了一个位置信息,默认的锚点是#top 也就是网页的上端,而javascr

CSS/Js文本溢出自动添加省略号ellipsis

  CSS文本溢出省略号 text-overflow:ellipsis ext-overflow是一个比较特殊的属性,W3C早前的文档中(目前的文档中没有包含text-overflow属性,FML!)对其的定义是: Name: text-overflow-mode Value: clip | ellipsis | ellipsis-word clip : 不显示省略标记(-),而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记(-),省略标记插入的位置是最后一个字符. elli

javascript自动给文本url地址增加链接的方法分享

 这篇文章主要介绍了javascript自动给文本url地址增加链接的方法,有需要的朋友可以参考一下 URL地址自动添加的实现其实就是那么点内容:检测与替换.   检测   "检测"就是检测文字(字符串)内部是否有符合http地址的内容,显然,这需要用到正则表达式进行验证,这个工作前端和后台都可以做,这里,只讲前端的方法,使用JavaScript实现.   验证HTTP地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正):   代码如下: var reg = /(http://|

javascript自动给文本url地址增加链接的方法

URL地址自动添加的实现其实就是那么点内容:检测与替换. 检测 "检测"就是检测文字(字符串)内部是否有符合http地址的内容,显然,这需要用到正则表达式进行验证,这个工作前端和后台都可以做,这里,只讲前端的方法,使用JavaScript实现. 验证HTTP地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正):  代码如下 复制代码 var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g; 前一部分匹配http或是https开头

Js与css实现文本溢出自动添加省略号方法总结

1.常规css方法--可以实现IE,Safari,chrome,opera浏览器下文字溢出省略号表示 这是一段测试文字,主要是用来测试文字溢出后是否会用省略号显示.  代码如下 复制代码 .zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} 2.使用ellipsis.xml文件使Firefox支持文字溢出后点

几种自动给URL地址加上超链接(asp,php,js)

//php正则匹配url地址并自动添加链接  代码如下 复制代码 function autolink($foo) { $foo = eregi_replace('(((f|ht){1}tp://)[-a-za-z0-9@:%_+.~#?&//=]+)', '<a href="" target=_blank rel=nofollow></a>', $foo); if( strpos($foo, "http") === false ){