javascript - 在 Javascript 中从字符串中提取 URL

Question

我正在从服务中获取原始 HTML 数据，并且需要从字符串中提取 URL。具体来说，HTML 中有一个部分存在 URL 字符串，它是一个名为“data-url”的参数。有没有办法可以提取紧随“data-url”之后的 URL。这是一个例子:

let html_str = '<div class="tv-focusable" id="tv_web_answer_source" tabindex="-1" data-url="https://apple.stackexchange.com/questions/323174/does-the-iphone-8-have-any-sort-of-water-resistance-or-waterproof-manufacturing" onclick="onUrlClick(this)">'

我只需要删除域名并存储它。

Answer 1

您可以使用new URL(text)从字符串创建URL对象，并获取该对象的主机名。唯一剩下的事情就是选择如何从 html 中提取 url。

使用正则表达式

var html = '<div class="tv-focusable" id="tv_web_answer_source" tabindex="-1" data-url="https://apple.stackexchange.com/questions/323174/does-the-iphone-8-have-any-sort-of-water-resistance-or-waterproof-manufacturing" onclick="onUrlClick(this)">';

console.log(new URL(html.match(/data-url="([^"]*)"/)[1]).hostname);

使用html

var html = '<div class="tv-focusable" id="tv_web_answer_source" tabindex="-1" data-url="https://apple.stackexchange.com/questions/323174/does-the-iphone-8-have-any-sort-of-water-resistance-or-waterproof-manufacturing" onclick="onUrlClick(this)">';

var element = document.createElement("div");
element.innerHTML = html;
var elementWithData = element.querySelector("[data-url]");
if (elementWithData) {
  console.log(new URL(elementWithData.getAttribute("data-url")).hostname);
}

我个人会选择 html 解决方案，因为如果(出于未知原因)url 包含此文本 \"，那么正则表达式将失败(尽管您可以添加该约束)。

此外，如果您想要 ES5 兼容性，您应该使用 getAttribute 而不是 dataset。但这仅在使用较旧版本的 IE(最多 11)时才有意义