Самый эффективный способ преобразования простого текста в HTML, Match или Regexp.

У меня есть большой текстовый документ, заполненный случайными словами, URL-адресами, адресами электронной почты и т. д. Пример: «word 2014 [email protected] 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

Я хочу обернуть все эти строки в теги и иметь возможность выбирать изображения, гиперссылки, электронные письма и строки. Я пробовал разные способы, но не уверен, какой из них лучше, а также есть регулярное выражение, которое я не совсем понимаю.

Конечный результат должен быть:

<span>word</span>
<span>2014</span> 
<a class="mail" href="mailto:john@doe">[email protected]</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://" и сделать его максимально чистым и аккуратным.


javascript regex plaintext
person Jonas Johansson    schedule 31.05.2014    source источник
comment
Не используйте javascript, php более мощный, и он будет делать именно то, что вы хотите. Если это направление, которое вы хотите, пожалуйста, задайте свой вопрос в этом формате. Я знаю, что иногда мы ограничены, но если у вас есть доступ к своего рода серверу, это будет возможно с php   -  person EasyBB    schedule 31.05.2014
comment
Я извлекаю текстовый контент через javascript и хотел бы, чтобы он оставался в этой сфере. в основном у меня есть расширение Chrome, которое сохраняет .txt в папку Dropbox. что .txt содержит много случайного контента, может быть что угодно в мире текста. Затем я хочу расшифровать его и превратить в html, чтобы я мог отделять изображения от других URL-адресов, а также превращать слова в интервалы. если возможно, я бы не хотел задействовать php.   -  person Jonas Johansson    schedule 31.05.2014
comment
Лучший способ сгенерировать html-файл из txt-файла — пройти через него и дерриерировать каждое слово после проверки с помощью регулярного выражения, тогда мы можем динамически создавать html, помещая слово, завернутое в соответствующие теги.   -  person EasyBB    schedule 31.05.2014
comment
да, в моем коде я думаю, что это то, что я делаю для гиперссылок и изображений, но я не знаю, чтобы захватить остальное в промежутках.   -  person Jonas Johansson    schedule 01.06.2014

Ответы (1)


arrow_upward
-1
arrow_downward

Я делаю несколько предположений о ваших данных (например, что каждая запись всегда там). Если это правда, то что-то вроде этого должно работать нормально:

    <script>

    var data = ['word\n 2014\t\t    [email protected]\n\n\n\n\n http://www.example.com/ http://example.com/image.gif apa http',
                'fooo 2013 [email protected] 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>
person fin    schedule 31.05.2014
comment
Данные являются динамическими, информация будет добавляться, а также могут быть разрывы строк. Я обновлю свой пост. - person Jonas Johansson; 31.05.2014
comment
string.replace(/\n/g,'').split(' ') при добавлении будет иметь дело с разрывами строк. Более серьезная проблема заключается в том, что каждый элемент существует и ' ' является правильным разделителем. - person fin; 31.05.2014
comment
тем не менее, мой контент не всегда выглядит так, как в примере, это смесь всего, и новые данные добавляются случайным образом. так что нет порядка. единственная константа в том, что будут строки, и мне нужно обернуть теги вокруг изображений, ссылок, электронных писем и всех других текстовых узлов. должна быть возможность удалить все пробелы, а оставить только один? - person Jonas Johansson; 31.05.2014
comment
Если вы не знаете порядок, то вам придется проверить все. Отредактировано, хотя я сомневаюсь, что это окажется наиболее эффективным методом. ;) - person fin; 31.05.2014
comment
да, ваше решение похоже на то, что у меня уже есть, хотя и более элегантное. - person Jonas Johansson; 01.06.2014