在项目中有个这样的设计,备注中的URL自动识别为点击的链接,对此的处理方式是用正则匹配出URL部分,然后替换成<a href=URL>URL这样即可。其主要部分是正则匹配出URL部分。
假设有这么一段文本。
那么我们可以这么写。
var text = "你好,我是一段文本。我链接到http://leeiio.me/test.html请大家多多指教。"; var regexp = /((http|ftp|https|file):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\-\.\/?\@\%\!\&=\+\~\:\#\;\,]*)?)/ig; text = text.replace(regexp,"<a href='$1'>$1</a>"); console.log(text); |
但是如果URL中带有中文,那么以上的就不顶事了。
虽然我们不应该用中文作为URL的一部分,已经把中文部分encode掉,但是很多人比如粗心的写wordpressd的人,通常不指定Slug,那么很多URL自然也就带上了标题的中文了。比如:
假设有这么一段文本。
你好,我是一段文本。我链接到http://leeiio.me/这是一篇测试.html 请大家多多指教。
那么应该把正则改成这样
var text = "你好,我是一段文本。我链接到http://leeiio.me/这是一篇测试.html 请大家多多指教。"; var regexp = /((http|ftp|https|file):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\%\!\&=\+\~\:\#\;\,]*)?)/ig; text = text.replace(regexp,"<a href='$1'>$1</a>"); console.log(text); |
不过如果以上这段文本在”html”和”请”字中间没有空格的话,也会错误地把后面的”请大家多多指教。”识别为URL的一部分,所以说也并不是十分完美。而且如果标题是汉文呢?日文呢?就不行了,因为刚才正则中增加的\u4e00-\u9fa5只是中文的编码区间。
既然如此我们就使用更加暴力的正则吧。比如这么一段文本:
你好,我是一段文本。我链接到http://leeiio.me/这是一篇测试.html 请大家多多指教。
こんにちは、私はテキストをしています。私はこれはテストですhttp://leeiio.me/にリンクしています.Html のは、展覧会をしてください。
안녕, 난 텍스트입니다. 나는 이것은 테스트입니다 http://leeiio.me/에연결할수있습니다.HTML 을 전시주세요.
对应的正则匹配换成这种
var text = "你好,我是一段文本。我链接到http://leeiio.me/这是一篇测试.html 请大家多多指教。こんにちは、私はテキストをしています。私はこれはテストですhttp://leeiio.me/にリンクしています.Html のは、展覧会をしてください。안녕, 난 텍스트입니다. 나는 이것은 테스트입니다 http://leeiio.me/에연결할수있습니다.HTML 을 전시주세요."; var regexp = /((http|ftp|https|file):[^'"\s]+)/ig; text = text.replace(regexp,"<a href='$1'>$1</a>"); console.log(text); |
最终的匹配结果是:
你好,我是一段文本。我链 接到<a href=’http://leeiio.me/这是一篇测试.html’>http://leeiio.me/这是一篇测试.html< /a> 请大家多多指教。こんにちは、私はテキストをしています。私はこれはテストです<a href=’http://leeiio.me/にリンクしています.Html’>http://leeiio.me/にリンクしていま す.Html のは、展覧会をしてください。안녕, 난 텍스트입니다. 나는 이것은 테스트입니다 <a href=’http://leeiio.me/에연결할수있습니다.HTML’>http://leeiio.me/에연결할수있습니 다.HTML 을 전시주세요.
当然同上,网址和文字之间得用空格隔开,不然还是会把后面的文字部分也识别为URL的一部分。对于英文文本就显得很有用了,因为英文单词之间肯定都是会用空格隔开的么。所以也希望大家养成好习惯,在一段文本中URL部分和文本之间用空格隔开。
PS:识别一个邮件地址变成email则可以这么干
var text = "你好,我是一段文本。我的email地址:test@test.com"; var regexp = /[a-z0-9_\-+=.]+@[a-z0-9\-]+(\.[a-z0-9-]+)+/ig; text = text.replace(regexp,function(h){return"<a href='mailto:"+h+"'>"+h+"</a>"}); console.log(text); |
注: 这篇文章为转载,在这只是为了更好的记住 感谢作者