Question

我有一个大文本文档，里面填充了随机单词，网址，电子邮件地址等。例如：＆＃34;字2014 john@doe.com http://www.example.com/ http://example.com/image.gif＆＃34;，但它可能看起来不同，可能有换行符，多个空格，制表符等。数据可能会非常快速变大（它是一种书签服务，因此数据一直以图像，文本和超链接的形式到达）

文本文档中的另一个内容示例（我用于测试的内容）：

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中查找inverse，就像在包含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的纯文本，所以我猜不是一个选项。

如果可能的话，我想剥离＆＃34; http：//＆＃34;并尽可能干净整洁。

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>

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

1 个答案: