javascript - 将纯文本转换为 HTML、Match 或 Regexp 的最有效方法

Question

我有一个很大的文本文档，其中包含随机单词、URL、电子邮件地址等。例如:“word 2014 john@doe.com http://www.example.com/ http://example.com/image.gif”，但它可能看起来不同，可能会有换行符、多个空格、制表符等。数据可能会很快变得庞大(这是一种书签服务，因此数据一直以图像、文本和超链接的形式到达)。

文本文档中的另一个内容示例(我用于测试的那个):

http://movpod.in/images3/MovPod-logo.png
https://dt8kf6553cww8.cloudfront.net/static/images/developers/chooser-drawing-vfln1ftk6.png
http://xregexp.com/assets/regex_cookbook.gif
asd asd ad feaf
apa
http

我想将所有这些字符串包装在标签中，并能够定位图像、超链接、电子邮件和字符串。我尝试了不同的方法，但不确定哪种方法最好，而且还有一个我不完全理解的 RegExp。

最终结果应该是:

<span>word</span>
<span>2014</span> 
<a class="mail" href="mailto:john@doe">john@doe.com</a> 
<a class="url" href="http://www.example.com/">http://www.google.com/</a> 
<a class="img" href="http://example.com/image.gif">http://example.com/image.gif</a>"

匹配。然而，这种方法并没有保持文本顺序不变，但它确实有效。

arr = data.split("\n");
for (i = 0; i < arr.length; i++)
{
    arr2 = arr[i].split(' ');
    for (j = 0; j < arr2.length; j++)
    {
        if (arr2[j].match(/(.gif|.png|.jpg|.jpeg)/))
        {
            ext = arr2[j].substr(-4);
            ext = ext.replace(".","");
            imgs += '<a class="img '+ext+'" href="'+arr2[j]+'">'+arr2[j]+'</a>';
        }
        else if (arr2[j].match(/(http:)/))
        {
            urls += '<a class="url" href="'+arr2[j]+'">'+arr2[j]+'</a>';
        }
        else
        {
            spans += '<span>'+arr2[j]+'</span>';
        }
    }
}

正则表达式。我认为可以在 exp_all 中寻找逆函数，就像在其他任何地方一样，但不包含 http。然而，事实并非如此。

var exp_img     = /(https?:\/\/([\S]+?)\.(jpg|jpeg|png|gif))/g,
    exp_link    = /([^"])(https?:\/\/([a-z-\.]+)+([a-z]{2,4})([\/\w-_]+)\/?)/g,
    exp_all     = /^((?!http).)*$/g;

    text        = data.replace(exp_all, '<span>$3</span>');
    text        = text.replace(exp_img, '<a class="img" href="$1">$1</a>');
    text        = text.replace(exp_link, '<a class="url" href="$2">$2</a>');

因此，我们将不胜感激完成此纯文本到 HTML 转换的最佳方法。如果已经有某种类型的图书馆，我会很高兴。我在看 Markdown，但我仍然需要更新 Markdown 的纯文本，所以我想这不是一个选择。

如果可能的话，我想去掉“http://”，让它尽可能干净整洁。

Answer 1

我对您的数据做了一些假设(例如，每个条目始终存在。)如果这是真的，那么像这样的事情应该可以正常工作:

    <script>

    var data = ['word\n 2014\t\t    john@doe.com\n\n\n\n\n http://www.example.com/ http://example.com/image.gif apa http',
                'fooo 2013 foo@bar.com http://www.blah.com/ http://blah.com/gif.gif asd asd ad feaf'];

    function htmlify(string){
        var elem = string.replace(/[^\w\s\/@:\.]/g,'').replace(/\s+/g, ' ').split(' ');
        var result = [];
        for (var i = 0; i < elem.length; i++){
            if (elem[i].match(/http:/)) {
                if (elem[i].substr(-4).match(/.gif|.png|.jpg|.jpeg/)){
                    result.push("<a class='img' href='" + elem[i] + "'>" + elem[i] + "</a>");
                } else {
                    result.push( "<a class='url' href='" + elem[i] + "'>" + elem[i] + "</a>");
                }
            } else if (elem[i].match(/\w+@\w+\.\w+/)){
                    result.push("<a class='mail' href='mailto:" + elem[i] + "'>" + elem[i] + "</a>");
            } else {
                result.push("<span>" + elem[i] + "</span>");
            }
        }
        return result;
    }

    var result = data.map(htmlify);
    console.log(result);

    </script>