Как заменить и сократить гиперссылки в абзаце текста с помощью JavaScript / jQuery?

Question

Как заменить и сократить гиперссылки в абзаце текста с помощью JavaScript / jQuery?

0

Скажем, у меня есть абзац текста:

The Northrop Grumman X-47B https://en.wikipedia.org/wiki/Northrop_Grumman_X-47B 
is a demonstration unmanned combat air vehicle (UCAV) designed for carrier-based 
operations.

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

Northrop Grumman X-47B https://en.wikipedia.org... - демонстрационный беспилотный летательный аппарат (UCAV), предназначенный для операций на базе оператора.

Таким образом, код ссылки в тексте может выглядеть так:

<a href="https://en.wikipedia.org/wiki/Northrop_Grumman_X-47B">https://en.wikipedia.org...</a>

Я осмотрелся и нашел несколько примеров, но они вообще не работают. Я хотел бы просто использовать стандартную функцию JavaScript. То есть, функция, которая принимает открытый текст (а не HTML) и может преобразовывать текст. Не знаете, как вы будете защищать от XSS одновременно.

У меня есть подозрение, что он будет включать в себя сочетание циклов через каждую часть текста, затем некоторое регулярное выражение, чтобы найти URL-адрес, извлечь его, а затем сократить URL-адрес с помощью substr() и каким-то образом заменить его в тексте. Есть идеи, как это сделать?

Спасибо за помощь.

David J 20 сен. 2013, в 14:47

Источник

Теги:

javascript

jquery

hyperlink

plaintext

linkify

3 ответа

1

Что-то вроде этого:

$('p').html(function(_,txt) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return txt.replace(exp, function(l) {
        return '<a href="'+l+'">'+l.substr(0,20)+'...</a>'
    }); 
});

FIDDLE

adeneo 20 сен. 2013, в 09:22

0

Это приятно. Как насчет того, чтобы вместо селектора p найти все экземпляры текстовых узлов ? Это было бы очень хорошим решением
CodingIntrigue 20 сен. 2013, в 12:15
0

Не будет работать для ссылок, не относящихся к Википедии.
Andy 20 сен. 2013, в 12:28
0

Спасибо аденео, что работает! Можете ли вы объяснить, что именно делает регулярное выражение? Как это защищает от XSS? Это белый список только разрешенных символов?
David J 21 сен. 2013, в 01:37
0

@DavidJ - Регулярное выражение соответствует любому действительному URL, чтобы обернуть URL в якоря. XSS - это вставка сценариев, которые будут влиять на других пользователей, просто вставка HTML в DOM не представляет никакой проблемы, и это делается практически на каждом веб-сайте в Интернете.
adeneo 21 сен. 2013, в 01:56

Показать ещё 2 комментария

0

Я отредактировал утвержденный ответ, чтобы вернуть то, что вам нужно. Это заменит текст ссылки независимо от ссылки (т.е. Это не ссылка на wikipedia).

function replaceURLWithHTMLLinks(text) {
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  return text.replace(exp, function ($1) {
    return '<a href="' + $1 + '">' + $1.slice(0, 20) + '...</a>';
  });
}

скрипка

Andy 20 сен. 2013, в 10:10

Ещё вопросы

Это приятно. Как насчет того, чтобы вместо селектора p найти все экземпляры текстовых узлов ? Это было бы очень хорошим решением
Не будет работать для ссылок, не относящихся к Википедии.
Спасибо аденео, что работает! Можете ли вы объяснить, что именно делает регулярное выражение? Как это защищает от XSS? Это белый список только разрешенных символов?
@DavidJ - Регулярное выражение соответствует любому действительному URL, чтобы обернуть URL в якоря. XSS - это вставка сценариев, которые будут влиять на других пользователей, просто вставка HTML в DOM не представляет никакой проблемы, и это делается практически на каждом веб-сайте в Интернете.

Manish Goyal · Accepted Answer · 2013-09-20T10-15-00.000Z

Используйте этот скрипт

<script>
function convertlink(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + geturl(url) + '</a>';
    })

}

function geturl(url){
    if(url.length > 20){
     return url.substr(0,20) + "...";
    } else { 
     return url;
    }
}

var str = "The Northrop Grumman X-47B https://en.wikipedia.org/wiki/Northrop_Grumman_X-47B is a demonstration unmanned combat air vehicle (UCAV) designed for carrier-based operations."

alert(convertlink(str));
</script>