Javascript:在文档中查找 URL

Question

我如何在文档中找到 URL(即 www.domain.com)，并将它们放在 anchor 中:www.domain.com

html:

Hey dude, check out this link www.google.com and www.yahoo.com!

JavaScript:

(function(){var text = document.body.innerHTML;/*do replace regex => text*/})();

输出:

Hey dude, check out this link <a href="www.google.com">www.google.com</a> and <a href="www.yahoo.com">www.yahoo.com</a>!

Answer 1

首先，www.domain.com不是 URL，它是主机名，并且

<a href="www.domain.com">

不会工作⟩—⟩它会寻找.com名为 www.domain 的文件相对于当前页面。

在一般情况下不可能突出显示主机名，因为几乎任何东西都可以是主机名。您可以尝试突出显示“www.something.dot.separated.words”，但它并不是真的那么可靠，而且有许多网站不使用 www.主机名前缀。我会尽量避免这种情况。

/\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/;

这是一个非常自由的模式，您可以将其用作检测 HTTP URL 的起点。根据您获得的输入类型，您可能希望缩小它允许的范围，并且可能值得检测像 . 这样的尾随字符。或 !这将是 URL 的有效部分，但实际上通常不是。

(如果愿意，您可以使用 | 来允许 URL 语法或 www.hostname 语法。)

无论如何，一旦确定了首选模式，您就需要在页面的文本节点中找到该模式。 不要在 innerHTML 上运行正则表达式标记。 如果尝试标记每个 href="http://something"，您最终会完全破坏页面。那已经在标记内了。当您替换 innerHTML 时，您还将销毁任何现有的 JavaScript 引用、事件或表单字段值。内容。

一般来说，regexp 根本无法以任何可靠的方式处理 HTML。因此，利用浏览器已经将 HTML 解析为元素和文本节点这一事实，只需查看文本节点即可。您还需要避免向内看 <a>元素，因为当 URL 已经在链接中时将其标记为链接是愚蠢的(并且无效)。

// Mark up `http://...` text in an element and its descendants as links.
//
function addLinks(element) {
    var urlpattern= /\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/g;
    findTextExceptInLinks(element, urlpattern, function(node, match) {
        node.splitText(match.index+match[0].length);
        var a= document.createElement('a');
        a.href= match[0];
        a.appendChild(node.splitText(match.index));
        node.parentNode.insertBefore(a, node.nextSibling);
    });
}

// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findTextExceptInLinks(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType===Node.ELEMENT_NODE) {
            if (child.tagName.toLowerCase()!=='a')
                findTextExceptInLinks(child, pattern, callback);
        } else if (child.nodeType===Node.TEXT_NODE) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}