从 JavaScript 中的字符串中提取 URL答案

【问题标题】：URL extraction from String in Javascript从 JavaScript 中的字符串中提取 URL
【发布时间】：2019-02-07 14:31:48
【问题描述】：

我正在从服务中获取原始 HTML 数据，并且需要从字符串中提取 URL。具体来说，存在 URL 字符串的 HTML 部分，它是一个名为“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)">'

我只需要剥离域并存储它。

【问题讨论】：

明确一点：我正在尝试从字符串中提取 URL。
@HereticMonkey -_-，OP 表示从字符串形式的 html 文本中提取 url 作为字符串，而不是 html 形式。
结构是未知的，所以我无法知道 data-url 的值在哪里。
直到编辑他们得到一个字符串时才很清楚。还有其他问题提出了类似的问题，例如How to get html tag attribute values using JavaScript Regular Expressions?，但不幸的是他们专注于正则表达式，所以我不会标记为欺骗...... :)

标签： javascript string

【解决方案1】：

您可以使用new URL(text) 从字符串创建URL 对象并获取该对象的hostname。剩下的就是选择如何从 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 个）时才有意义

【讨论】：

您无需将 html 推送到您的文档 DOM 中即可将其用作 JS。您可以从文档中创建 DOM 元素
@Arthur 我正在从document 对象创建一个DOMElement。然后我设置innerHtml。这种方式更安全，因为它适用于包含超过 1 个起始元素的 htmlText。
好吧，我在想是什么 document.createElement() 在上面推送新元素。但事实并非如此。所以我之前的评论是没有必要的。
这里的一个问题是我的代码是一个节点服务器，所以没有 Document 对象。
@LeeProbert 在这种情况下，您可以使用适用于每个格式良好的 url 的正则表达式解决方案。或者您可以使用像 jsdom 这样的节点库将文本转换为 html

【解决方案2】：

最简单的方法是使用 DOM 来获取信息。将您的 html 字符串设置为新元素，选择它，然后使用数据集获取属性的值。

var div = document.createElement("div")
div.innerHTML = `<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)"></div>`
var str = div.querySelector('[data-url]').dataset.url
var host = new URL(str).hostname
console.log(host, str)

【讨论】：

【解决方案3】：

只需使用 getAttribute

document.getElementById('tv_web_answer_source').getAttribute('data-url')

更好的是，使用dataset（因为你想要的属性以data-开头）

document.getElementById('tv_web_answer_source').dataset.url

https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/dataset

【讨论】：

已更新以处理您的评论@epascarello
@Arthur 如果 html 的格式为 <div></div><div data-url="..."></div>，这将不起作用
请点赞 epascarello 和/或 nick zoum 的回答，他们很好。我的没有考虑到它是一个字符串而不是一个 DOM 元素。

【解决方案4】：

也许用

url = s.split("data-url=|\" ")[1];

【讨论】：

JS 有特定的功能来做到这一点