极客教程JavaScript 用正则表达式提取查询字符串的过程
查询字符串是跟随问号（?）的URL的一部分，用于向网页或应用传递数据。它通常由用和号（&）分隔的键值对组成。键表示参数，值表示通过参数传递的数据。
本文将讨论如何使用正则表达式从URL中提取查询字符串。
方法：
首先，我们需要定义一个正则表达式模式，该模式将匹配URL的查询字符串。正则表达式是一系列字符，形成一个搜索模式。它可用于检查字符串是否包含指定的搜索模式。
查询字符串的正则表达式模式为：
[?&]([^=]+)(=([^&#]*))?
此模式匹配查询字符串的开头（?），后面跟随由和号（&）分隔的任何键值对。键被捕获在第一个捕获组（[^=]+）中，值被捕获在第三个捕获组（([^&#]*)）中。
接下来，我们可以使用 JavaScript 中的 RegExp 对象从模式创建正则表达式。我们可以通过将模式传递给 RegExp 构造函数来实现：
const pattern = '[?&]([^=]+)(=([^&#]*))?';
const regex = new RegExp(pattern);
一旦我们有了正则表达式，我们可以使用test()方法来检查URL的查询字符串是否与模式匹配。test()方法返回一个布尔值，指示字符串是否包含匹配项。
示例1： 以下代码使用JavaScript从给定的URL中提取查询字符串，通过将其与正则表达式模式进行匹配，并在匹配时将查询字符串记录到控制台。
C++
#include <iostream>
#include <regex>
#include <string>
using namespace std;
int main() {
// URL to be queried
string url = "https://example.com?key1=value1&key2=value2";
// Regular expression pattern
string pattern = "[?&]([^=]+)(=([^&#]*))?";
// Creating a regex object from the pattern
regex regexObj(pattern);
// Creating a match object to hold the matched substring
smatch match;
// Querying the string using the regex
if (regex_search(url, match, regexObj)) {
string queryString = match.str();
cout << queryString << endl;
}
return 0;
}
Java
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class Main {
public static void main(String[] args)
{
// url to be queried
final String url
= "https:example.com?key1=value1&key2=value2";
// pattern
final String pattern = "[?&]([^=]+)(=([^&#]*))?";
// building regex from the pattern
Pattern regex = Pattern.compile(pattern);
// querying the string using the regex
Matcher matcher = regex.matcher(url);
if (matcher.find()) {
String queryString = matcher.group();
System.out.println(queryString);
}
}
}
JavaScript
<script>
// url to be queried
const url = 'https://example.com?key1=value1&key2=value2';
// pattern
const pattern = '[?&]([^=]+)(=([^&#]*))?';
// building regex from the pattern
const regex = new RegExp(pattern);
// querying the string using the regex
if (regex.test(url)) {
const queryString = url.match(regex)[0];
console.log(queryString);
}
</script>
C
using System;
using System.Text.RegularExpressions;
class Program
{
static void Main(string[] args)
{
// url to be queried
const string url = "https://example.com?key1=value1&key2=value2";
// pattern
const string pattern = @"[?&]([^=]+)(=([^&#]*))?";
// building regex from the pattern
Regex regex = new Regex(pattern);
// querying the string using the regex
if (regex.IsMatch(url))
{
string queryString = regex.Match(url).Value;
Console.WriteLine(queryString);
}
}
}
Python
import re
# URL to be queried
url = "https://example.com?key1=value1&key2=value2"
# Regular expression pattern
pattern = r"[?&]([^=]+)(=([^&#]*))?".encode('unicode-escape').decode()
# Creating a regex object from the pattern
regex_obj = re.compile(pattern)
# Querying the string using the regex
match = regex_obj.search(url)
if match:
query_string = match.group()
print(query_string)
# This code is contributed by Prajwal Kandekar
输出
?key1=value1
示例2:这段代码使用JavaScript通过正则表达式模式匹配从给定URL中提取查询参数，然后将查询字符串分割为单独的键值对。遍历键值对并将其存储在一个对象中，最后将查询参数对象打印到控制台。
JavaScript
<script>
// Define the URL and the regular expression pattern
const url = 'https://example.com?key1=value1&key2=value2';
const pattern = '[?&]([^=]+)(=([^&#]*))?';
// Create the regular expression object
const regex = new RegExp(pattern);
// Check if the URL matches the pattern
if (regex.test(url)) {
// Extract the query string from the URL
const queryString = url.match(regex)[0];
// Split the query string into individual key-value pairs
const keyValuePairs = queryString.split('&');
// Iterate over the key-value pairs
// store them in an object
const queryParams = {};
keyValuePairs.forEach(pair => {
const [key, value] = pair.split('=');
queryParams[key] = value;
});
// Output the query parameters object
console.log(queryParams);
}
</script>
输出
{ '?key1': 'value1' }
示例3:这段代码使用JavaScript通过正则表达式模式匹配从给定URL中提取查询参数，然后将查询字符串分割为单个的键值对，然后遍历键值对，并将它们存储在一个对象中。最后，遍历query parameters对象，在控制台中输出每个键值对。
JavaScript
<script>
// Define the URL and the regular expression pattern
const url = 'https://example.com?key1=value1&key2=value2';
const pattern = '[?&]([^=]+)(=([^&#]*))?';
// Create the regular expression object
const regex = new RegExp(pattern);
// Check if the URL matches the pattern
if (regex.test(url)) {
// Extract the query string from the URL
const queryString = url.match(regex)[0];
// Split the query string into individual key-value pairs
const keyValuePairs = queryString.split('&');
// Iterate over the key-value pairs
// store them in an object
const queryParams = {};
keyValuePairs.forEach(pair => {
const [key, value] = pair.split('=');
queryParams[key] = value;
});
// Iterate over the query parameters object
// output each key-value pair
for (const [key, value] of Object.entries(queryParams)) {
console.log(`{key}:{value}`);
}
}
</script>
输出
?key1: value1
总之，使用正则表达式从URL中提取查询字符串对于解析和操作通过URL传递的数据是一种有用的技术。通过定义一个正则表达式模式，匹配URL中的查询字符串，并使用RegExp对象和test()方法，可以轻松提取查询字符串，并将其分割为单个键值对。然后，这些键值对可以存储在一个对象中，以便于访问，允许我们轻松地检索和操作通过查询字符串传递的数据。正则表达式是处理字符串的强大工具，这项技术在各种web开发场景中都很有用。