Question

说我有一段文字：

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个字符，这样用户可以阅读的文字就更短了。

诺斯罗普·格鲁曼公司的X-47B https://en.wikipedia.org...是一款无人驾驶战斗机（UCAV），专为基于运营商的运营。

因此文本中链接的代码可能如下所示：

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

我环顾四周，发现few examples，但它们根本不起作用。我想要一个标准的JavaScript函数来做它。也就是说，一个接受明文（不是HTML）并且可以转换文本的函数。不确定如何同时防止XSS。

我怀疑它将涉及循环遍历文本的每个部分，然后一些正则表达式来查找URL，提取它，然后使用substr（）缩短URL然后以某种方式将其替换为文本。知道怎么做吗？

感谢您的帮助。

Answer 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

Answer 2

我编辑了approved answer以返回您需要的内容。无论链接如何，这都将替换链接文本（即，它不是维基百科的链接）。

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>';
  });
}

Fiddle

Answer 3

使用此脚本

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

如何使用JavaScript / jQuery替换和缩短文本段落中的超链接？

3 个答案: