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

njthzxwz  于 2023-08-08  发布在  其他
关注(0)|答案(2)|浏览(95)

我有一个很大的文本文档,里面充满了随机的单词、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

字符串
我想 Package 所有这些字符串的标签,并能够针对图像,超链接,电子邮件和字符串。我尝试了不同的方法,但不确定哪种是最好的,而且,还有一个我不完全理解的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>';
        }
    }
}

Regexp。我认为可以在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://”去掉,让它尽可能干净整洁。

jk9hmnmh

jk9hmnmh1#

您还可以让RegEx引擎根据它将文本块放入的组来告诉您该文本块是什么,
即图像、其它URL、电子邮件或文本。

const generateHTML = s => {
  const pattern = /(https?:\/\/\S*(?:\.gif|\.png]+))|(https?:\/\/\S*)|([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,})|(\S*)/gi
  return s.replace(pattern, (_, g1, g2, g3, g4) =>
    g1 ? `<a class="img" href="${g1}">${g1}</a><br/>` :
      g2 ? `<a class="url" href="${g2}">${g2}</a><br/>` :
        g3 ? `<a class="mail" href="mailto:${g3}">${g3}</a><br/>` :
          g4 ? `<span>${g4}</span><br/>` : ``);
}

字符串

qq24tv8q

qq24tv8q2#

我对你的数据做了一些假设(例如,每个条目总是存在的。)如果这是真的,那么像这样的东西应该可以正常工作:

<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>

字符串

相关问题