YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » JavaScript » 将文本中URL地址替换为可以点击的链接的处理办法

将文本中URL地址替换为可以点击的链接的处理办法

很久没有写文章了,这几天在写一个小程序的时候,需要用到正则表达式匹配用户输入文本中的URL地址,然后将URL地址替换成可以点击的链接。URL地址的匹配,我想这应该是大家在做验证处理中常会用到的,这里就把我整合的一个比较完整的表达式给出来:


var URL = /(https?:\/\/|ftps?:\/\/)?((\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(:[0-9]+)?|(localhost)(:[0-9]+)?|([\w]+\.)(\S+)(\w{2,4})(:[0-9]+)?)(\/?([\w#!:.?+=&%@!\-\/]+))?/ig;

这个表达式可以匹配 http,https,ftp,ftps以及IP地址的URL地址。还算是URL地址匹配计较完善的。利用这个表达式我写了两个小函数,将用户留言的URL地址替换成可点击的链接,没有什么太难的,就是利用JavaScript 的 replace() 函数来实现替换 URL 为 link:


/**
 * JavaScrit 版本
 * 将URL地址转化为完整的A标签链接代码
 */
var replaceURLToLink = function (text) {
        text = text.replace(URL, function (url) {
            var urlText = url;
            if (!url.match('^https?:\/\/')) {
                url = 'http://' + url;
            }
            return '' + urlText + '';
        });

        return text;
    };


/**
 * PHP 版本 在 Silva 代码的基础上修改的
 * 将URL地址转化为完整的A标签链接代码
 */
/** =============================================
 NAME        : replace_URLtolink()
 VERSION     : 1.0
 AUTHOR      : J de Silva
 DESCRIPTION : returns VOID; handles converting
 URLs into clickable links off a string.
 TYPE        : functions
 ============================================= */

function replace_URLtolink($text) {
    // grab anything that looks like a URL...
    $urls = array();
    
    // build the patterns
    $scheme = '(https?\:\/\/|ftps?\:\/\/)?';
    $www = '([\w]+\.)';
    $local = 'localhost';
    $ip = '(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})';
    $name = '([\w0-9]+)';
    $tld = '(\w{2,4})';
    $port = '(:[0-9]+)?';
    $the_rest = '(\/?([\w#!:.?+=&%@!\-\/]+))?';
    $pattern = $scheme.'('.$ip.$port.'|'.$www.$name.$tld.$port.'|'.$local.$port.')'.$the_rest;
    $pattern = '/'.$pattern.'/is';
    
    // Get the URLs
    $c = preg_match_all($pattern, $text, $m);
    
    if ($c) {
        $urls = $m[0];
    }
    
    // Replace all the URLs
    if (! empty($urls)) {
        foreach ($urls as $url) {
            $pos = strpos('http\:\/\/', $url);
            
            if (($pos && $pos != 0) || !$pos) {
                $fullurl = 'http://'.$url;
            } else {
                $fullurl = $url;
            }
            
            $link = ''.$url.'';
            
            $text = str_replace($url, $link, $text);
        }
    }
    
    return $text;
}

PS:可能前端做太久了,感觉JavaScript的很多语法要比PHP或者其他的语言灵活多了。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:将文本中URL地址替换为可以点击的链接的处理办法

« »

4 条评论

  • 今天将JavaScript和PHP代码都调整了一下,让程序可以识别http://localhost这样的本地测试考法用的URL地址。

  • 好 姚大侠
    有个问题请教下
    CSS制作的箭头图标 怎么样添加到CSS里边?
    这个是箭头图标:.trigon {border-top:8px solid #FFFFFF;border-left:8px solid #008f4b;border-bottom:8px solid #FFFFFF;}
    原先的li列表 是用了一个JPG 以URL形式添加的background:url(../images/packing_banner-highqualityer.png)

    谢谢

  • carousel.zip 这个代码可以发我一个吗。谢谢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)