JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text"></div>

JavaScript

var txt = '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.';

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

var rep = replaceURLWithHTMLLinks(txt);

document.getElementById('text').innerHTML = rep;