Добавьте <wbr> и многоточие к длинным ссылкам (связано с jquery.linkify)

Question

Я использую "Linkify", чтобы добавить ссылки на статический текст... Это то, что я использую:

https://github.com/maranomynet/linkify/blob/master/1.0/jquery.linkify-1.0.js

Я хотел бы добавить <wbr> (разрыв слова) после 15 символов и … после 30 или около того... (если ссылка <30 символов, не добавляйте...)

Таким образом, ссылка будет выглядеть примерно так: https://github.com/mara<wbr></wbr>nomynet/linkify&hellip;

Я полагаю, мне нужно работать с var "$2" в этом jquery.linkify-1.0.js, но я немного запутался, как это сделать...

Любая подсказка?

Спасибо!

Answer 1

Я не претендую на звание мастера JavaScript/jQuery, но вот то, что я придумал, похоже, работает. Если у кого-то есть лучший метод для выполнения некоторых функций, я весь в ушах - я скорее человек из C#, поэтому Javascript/jQuery - слабое звено, которое я пытаюсь улучшить.

Шаг 1: Поместите этот кусок кода где-нибудь, чтобы плагин linkify мог его прочитать (я поместил его в файл linkify).

function FormatLink(a) {
    // Configurable settings
    var wbrPosition = 15;
    var hellipPosition = 30;
    var wbr = '<wbr></wbr>';
    var hellip = '&hellip;';

    // Put the data into a span, makes it so we can alter it without losing surrounding text.
    var link = $('<span>' + a + '</span>');

    // If no href, this is not a URL. Pass it back.
    if (link.find('a').attr('href') == undefined) {
        return a;
    }

    jQuery.each(link.find('a'), function () {
        var original = $(this).html() + '</a>';
        var updated = $(this);
        // Set length
        var length = updated.html().length;

        if (length > hellipPosition) {
            updated.html(updated.html().substr(0, hellipPosition) + hellip);
        }

        if (length > wbrPosition) {
            updated.html(updated.html().substr(0, wbrPosition) + wbr + updated.html().substr(wbrPosition, length));
        }

        if (link.html() !== null && link.find('a').html() !== null && original !== null && updated.html() !== null) {
            var changes = link.html().replace(original, updated.html() + '</a>');
            if (changes !== null && changes !== '') {
                link.html(changes);
            }
        }
    });

    return link.html();
}

Шаг 2: Измените функцию linkify. Заменить это:

  linkifier = function ( html ) {
      return html
                  .replace( noProtocolUrl, '$1<a href="<``>://$2">$2</a>$3' )  // NOTE: we escape `"http` as `"<``>` to make sure `httpOrMailtoUrl` below doesn't find it as a false-positive
                  .replace( httpOrMailtoUrl, '$1<a href="$2">$2</a>$3' )
                  .replace( /"<``>/g, '"http' );  // reinsert `"http`
    },

С этим:

  linkifier = function (html) {
      return FormatLink(html
                  .replace(noProtocolUrl, '$1<a href="<``>://$2">$2</a>$3')  // NOTE: we escape `"http` as `"<``>` to make sure `httpOrMailtoUrl` below doesn't find it as a false-positive
                  .replace(httpOrMailtoUrl, '$1<a href="$2">$2</a>$3')
                  .replace(/"<``>/g, '"http'));  // reinsert `"http`
  },

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