从字符串 javascript 中获取 url

在开发 Web 应用过程中常常需要从 JavaScript 字符串中获取 URL。这个过程可能比较简单，也可能相对复杂，取决于你需要获取 URL 的方法和情况。

本文将介绍几种从字符串 JavaScript 中获取 URL 的方法。

方法一：正则表达式

使用正则表达式是最常见的从 JavaScript 字符串中获取 URL 的方法之一，也是最灵活的方法。在本方法中，您需要将 URL 匹配出来，并使用 JavaScript 的正则表达式相关函数去进行处理。

下面是一个获取URL的正则表达式示例,该正则表达式可以捕获所有的URL：

const REGEX_URL = /((?:https?:\/\/)?(?:www\.)?(?:\S+\.[^\s,\.]{2,}(?::\d+)?(?:\/[^\s]*)?))/g;
const urlString = "Visit my <a href=\"http://www.google.com\">Google</a> profile for more info.";
const urls = urlString.match(REGEX_URL);
console.log(urls); // ["http://www.google.com"]

正则表达式的解释：

• ((?:https?:\/\/)? – 匹配协议部分（http 或 https）
• (?:www\.)? – 匹配可能存在的 www 子域名
• (?:\S+\.[^\s,\.]{2,} – 匹配主机名（例如 google.com），该主机名包含非空白字符。
• (?::\d+)? – 如果主机名后面跟着一个端口号，则匹配端口号。
• (?:\/[^\s]*)?) – 匹配路径

上述代码中，我们使用 RegExp.prototype.match() 方法将 URL 匹配出来，并将其保存在一个数组中。

方法二：URL 解析器

使用 URL 解析器是从 JavaScript 字符串中获取 URL 的另一种常用方法。可以使用 JavaScript 的内置 URL 对象来解析 URL。

下面的代码演示了如何使用 URL 对象解析 URL：

const urlString = "http://www.google.com";
const urlObject = new URL(urlString);
console.log(urlObject.href); // "http://www.google.com/"

在上述代码中，我们创建了一个 URL 对象，并使用传入的字符串初始化该对象。接着，我们打印该 URL 对象的 href 属性，href 属性包含了完整的网址。

方法三：分割字符串

使用分割字符串方法，我们可以将 URL 拆分成多个部分，例如主机名、协议、路径等等。

以下代码演示了如何使用分割字符串方法获取主机名：

const urlString = "http://www.google.com";
const urlParts = urlString.split("://");
console.log(urlParts); // ["http", "www.google.com"]
console.log(urlParts[0]); // "http"
console.log(urlParts[1]); // "www.google.com"

在上述代码中，我们使用 String.prototype.split() 方法从字符串中将 :// 拆分出来得到主机名。

方法四：查询字符串

对于具有查询字符串的 URL，我们可以使用 JavaScript 的 URLSearchParams 对象来处理查询字符串。下面是一个示例：

const urlString = "http://www.google.com/?q=test";
const urlObject = new URL(urlString);
const searchParams = urlObject.searchParams;
console.log(searchParams.get("q")); // "test"

在上述代码中，我们使用 URLSearchParams.prototype.get() 方法从查询字符串中获取指定的参数值。您可以使用此方法获取 URL 中的任意参数。

总结

• 从 JavaScript 字符串中获取 URL 的方法有许多，可以使用正则表达式、URL 解析器、字符串分割和查询字符串等。
• 对于彼此都可以使用的 URL，相互之间的方法区别不大，您可以根据您自己的爱好和代码中的上下文进行选择。