我如何在文档中找到 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>!
最佳答案
首先,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]);
}
}
}
关于Javascript:在文档中查找 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2641582/