接近完美的标识外链的方法

中午在研究 JavaScript and CSS Type 的时候,无意中发现这个文章,解决困惑我很久的标识外链的问题:

CSS – What is a better solution to mix text with images?

在此之前,我是直接在文章中插入图片的,最原始的方法,虽然视觉上没有什么不妥,但是太Low了:

<img src="/wp-content/uploads/2013/03/ext-link.png" width="10" height="10" />

现在的方法:

<span class="ext-link"></span>

CSS 实现:

.ext-link {
    text-indent: -9999px;
    background: url('./ext-link.png') no-repeat center bottom;
    width: 10px;
    height: 10px;
    display: inline-block;
    padding: 0 10px 0 10px;
}

思考:还有一个思路是不用手工标识,而用JS判断,如果非本站链接,自动添加CSS样式,以后再研究。

参考:bulletproof URL matching regex for javascript?

    var html = 'http://www.google.com';
    html += '\rwww.google.com ';
    html += '\rcode.google.com';
    html += '\rhttp://code.google.com/hosting/search?q=label%3aPython';
    var regex = /(https?:\/\/)?(\w+\.?)+(\/[a-zA-Z0-9\?%=_\-\+\/]+)?/gi;
    alert('before replace:');
    alert(html);
    html = html.replace(regex, function (match, capture) {
        if (capture) {
            return match
        }
        else {
            return 'http://' + match;
        }
    });
    alert('after replace:');
    alert(html);

1 Comment

Got Something To Say:

Your email address will not be published. Required fields are marked *

*

参考 Confluence 的样式,进一步升级:

<sup><img src="/static/img/ext.png"/></sup>

© 2006-2018. Powered by WordPress Romangie & Bootstrap. ICP No. 15008795