Question

下面的代码效果很好，它能够用链接替换它找到的任何标记，但是现有链接的标记也会被替换，比如应该忽略的@google。

<div class="post">
    <p class="test">First text some @microsoft</p>
    <p class="test">Second text with <a href="http://www.google.com">@google</a>, @yahoo</p> 
    <p class="test">Third text with @apple, @stackoverflow</p>
</div>  


$('.post p.test').each(function (i, el) {
    $(el).html($(el).html().replace(/\B\@([\w\-]+)/gim, function (match, username) {
        return '<a href="http://www.twitter.com/' + username + '">' + match + '</a>';
    }));
});

我对正则表达式没有好运，我希望jquery忽略带有现有链接的标签：http://jsfiddle.net/ereXZ/1/

Answer 1

您可以在链接正则表达式后尝试否定前瞻(?!</a>)，请参阅updated jsfiddle

请注意，[\w\-]+已更改为[\w\-]+\b(?!</a>)。 \b确保正则表达式与标记的末尾匹配，(?!</a>)确保标记后跟关闭链接标记不匹配（并且/需要分隔）。

Answer 2

您可以使用contents迭代其内容，过滤它们以仅考虑文本节点（或排除html个节点），而不是使用元素的a，并且取而代之。

据我所知，~~不幸的是我还不知道如何用其他东西替换文本节点~~（编辑：它现在正在工作）：< / p>

$(el)
    .contents()
    .filter(function() {
        return this.nodeType == 3;
    })
    .each(function() {
        var span = $(this).wrap('<span/>').parent();
        span.html(span.html().replace(/\B\@([\w\-]+)/gim, function (match, username) {
            return '<a href="http://www.twitter.com/' + username + '">' + match + '</a>';
        }));
    });

在替换其内容之前，它将文本节点包装在span内，因为您无法在文本节点中添加其他元素。

jsFiddle

的实例

不要替换现有的url正则表达式

2 个答案: