JavaScript中从URL字符串中提取特定单词

Question

我有一个包含查询字符串的URL，以特定字母开头和结尾。以下是示例和我的方法：

假设地址栏中的URL为"http://localhost:3001/build/?videoUrl=bitcoin.vid.com/money#/"，我首先使用window.location.href提取此URL并将其保存在变量x中。

现在，我想首先检查URL中是否存在videoUrl，如果可用，则拆分URL并提取所需的URL，即bitcoin.vid.com/money。

let x = "http://localhost:3001/build/?videoUrl=bitcoin.vid.com/money#/";
let y;
let result;
if(x.indexOf("?videoUrl")>-1) {
   y = x.split("?videoUrl=");
   result = y[1].split("#")[0];
   console.log("Resultant URL:", result);
}

我感觉我写的整个代码有点繁琐。能否有人告诉我是否有更优雅的方式来完成相同的任务？

注：由于URL中并不总是有videoUrl，因此需要检查它是否存在。请问我是否需要进行进一步的检查？

- Angela Roux

---

可能是重复的问题：如何在JavaScript中获取查询字符串值？ - Herohtar

• https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
• https://caniuse.com/#search=URLSearchParams

- Peter Seliger

Answer 1

你的方法可行，这很重要- 但为了更清晰、更健壮地解决问题，你可以利用内置的JavaScript URL() 类。

let x = "http://localhost:3001/build/?videoUrl=bitcoin.vid.com/money#/";
console.log((new URL(x)).searchParams.get("videoUrl"));

如果您的videoUrl参数不存在，那么这将返回null，您可以相应地处理它。

---

如果您想使其稍微更具可重用性，这里有一个函数可以满足您的需求：

const getParamFromUrl = (url, param) =>
    (new URL(url)).searchParams.get(param);

有关此实现和兼容性的更多信息，请参阅文档，网址为：https://developer.mozilla.org/en-US/docs/Web/API/URL

- Lissy93

Answer 2

好问题！

有两种整洁的解决方案：

• 尝试使用@Lissy建议的URL方法，所有需要的功能都已内置。但是她没有提到在跨浏览器功能方面可能存在的缺陷。
• 或者，我会使用一个简单的正则表达式，例如(\?|\&)([^=]+)\=([^&]+) - 在我看来，这更加简单。

- user7947604