正则表达式：将哈希标签转换为链接而不破坏现有的HTML代码

Question

我想将javascript字符串中的所有URL转换为链接，该字符串中还包含以井号#开头的单词。

目前我创建了两个级联的正则表达式，一个基于URL创建HTML锚标记，另一个为hashtag（如Twitter中）创建锚标记。

我试图将www.sitename.com/index.php#someAnchor解析成正确的标记，但遇到了很多问题。

content = urlifyLinks(content);
content = urlifyHashtags(content);

这两个函数的定义如下：

function urlifyHashtags(text) {
    var hashtagRegex = /^#([a-zA-Z0-9]+)/g;
    var tempText = text.replace(hashtagRegex, '<a href="index.php?keywords=$1">#$1</a>');

    var hashtagRegex2 = /([^&])#([a-zA-Z0-9]+)/g;
    tempText = tempText.replace(hashtagRegex2, '$1<a href="index.php?keywords=$2">#$2</a>');

    return tempText;
}

function urlifyLinks(inputText) {
    var replaceText, replacePattern1, replacePattern2, replacePattern3;

    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
    return replacedText;
}

我正在考虑解析urlifyLinks的输出，并将正则表达式应用于所有位于第一层的文本元素的dom元素，这是否很丑陋？

- Luke Morgan

---

你考虑过使用 https://github.com/twitter/twitter-text-js 吗？ - Esailija

实际上我还没有，我猜它可以工作，但我真的更喜欢使用一个简单的Javascript解决方案，而不是使用外部库来实现这个功能。 - Luke Morgan

Answer 1

你可以通过使用带有回调函数替换的单个正则表达式来避免这个问题。

例如：

function linkify(str){
    // order matters
    var re = [
        "\\b((?:https?|ftp)://[^\\s\"'<>]+)\\b",
        "\\b(www\\.[^\\s\"'<>]+)\\b",
        "\\b(\\w[\\w.+-]*@[\\w.-]+\\.[a-z]{2,6})\\b", 
        "#([a-z0-9]+)"];
    re = new RegExp(re.join('|'), "gi");

    return str.replace(re, function(match, url, www, mail, twitler){
        if(url)
            return "<a href=\"" + url + "\">" + url + "</a>";
        if(www)
            return "<a href=\"http://" + www + "\">" + www + "</a>";
        if(mail)
            return "<a href=\"mailto:" + mail + "\">" + mail + "</a>";
        if(twitler)
            return "<a href=\"foo?bar=" + twitler + "\">#" + twitler + "</a>";

        // shouldnt get here, but just in case
        return match;
    });
}

- Qtax

---

@LukeMorgan，稍微改进了一下表达，并在http://jsfiddle.net/PMVEy/中添加了示例。 - Qtax