How to replace plain URLs with links?

前端 未结 24 2292
生来不讨喜
生来不讨喜 2020-11-21 05:42

I am using the function below to match URLs inside a given text and replace them for HTML links. The regular expression is working great, but currently I am only replacing t

24条回答
  •  孤街浪徒
    2020-11-21 06:01

    This solution works like many of the others, and in fact uses the same regex as one of them, however in stead of returning a HTML String this will return a document fragment containing the A element and any applicable text nodes.

     function make_link(string) {
        var words = string.split(' '),
            ret = document.createDocumentFragment();
        for (var i = 0, l = words.length; i < l; i++) {
            if (words[i].match(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi)) {
                var elm = document.createElement('a');
                elm.href = words[i];
                elm.textContent = words[i];
                if (ret.childNodes.length > 0) {
                    ret.lastChild.textContent += ' ';
                }
                ret.appendChild(elm);
            } else {
                if (ret.lastChild && ret.lastChild.nodeType === 3) {
                    ret.lastChild.textContent += ' ' + words[i];
                } else {
                    ret.appendChild(document.createTextNode(' ' + words[i]));
                }
            }
        }
        return ret;
    }
    

    There are some caveats, namely with older IE and textContent support.

    here is a demo.

提交回复
热议问题