【JavaScript 小工具】——获取 URL 中的参数

要从 location.href 中获取指定参数，你可以使用 JavaScript 来解析 URL 并提取参数值。以下是一种常见的方法：

// 获取当前页面的 URL
var urlString = window.location.href;

// 解析 URL，获取参数部分
var url = new URL(urlString);

// 获取参数值
var parameterValue = url.searchParams.get('parameterName');

// parameterName 替换为你要获取的参数名称

这段代码的工作原理是：

1. 使用 window.location.href 获取当前页面的完整 URL。
2. 使用 URL 对象来解析这个 URL。
3. 使用 searchParams.get('parameterName') 方法获取指定参数名（例如 ‘parameterName’）对应的参数值。

请确保将 'parameterName' 替换为你希望获取的实际参数名称。

除了使用 URL 对象和 searchParams.get() 方法来获取 URL 中的参数外，还有几种常见的方法可以达到同样的目的。以下是其中一些方法：

方法一：使用正则表达式

你可以通过正则表达式直接从 window.location.href 中提取参数值。例如，如果你知道参数的格式和位置，可以使用类似于以下的正则表达式：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// 使用示例
var parameterValue = getParameterByName('parameterName');

方法二：使用 split 方法

如果你只关心简单的参数提取，也可以使用 split 方法来拆分 URL 字符串：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var parts = url.split(/[?&]/);
    for (var i = 0; i < parts.length; i++) {
        var param = parts[i].split('=');
        if (param[0] === name) {
            return decodeURIComponent(param[1].replace(/\+/g, ' '));
        }
    }
    return null;
}

// 使用示例
var parameterValue = getParameterByName('parameterName');

方法三：使用 URLSearchParams 对象（现代浏览器支持）

如果你确定你的目标浏览器支持 URLSearchParams 对象，可以直接使用它来获取参数值：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    var searchParams = new URLSearchParams(new URL(url).search);
    return searchParams.get(name);
}

// 使用示例
var parameterValue = getParameterByName('parameterName');

// window.location.href 
let testUrl = 'https://editor.csdn.net/md?not_checkout=1&spm=1015.2103.3001.8066&articleId=135642535'
const urlParams = new URL(testUrl);//将字符串变成url对象
//判断url是否存在这个key值
console.log(urlParams.searchParams.has("spm")) // true 

//获取这个key值的value
console.log(urlParams.searchParams.get("spm")) ; // 1015.2103.3001.8066 

//获取url所有的key 结果是一个数组
urlParams.searchParams.getAll("spm"); // [  "1015.2103.3001.8066" ]

//url追加一个key-value
urlParams.searchParams.append("spm2", "spm2Value"); 
urlParams.searchParams.toString(); //not_checkout=1&spm=1015.2103.3001.8066&articleId=135642535&spm2=spm2Value

//设定key-value
urlParams.searchParams.set("articleId", "More webdev"); ; //设定key-value
urlParams.searchParams.toString(); // 'not_checkout=1&spm=1015.2103.3001.8066&articleId=More+webdev&spm2=spm2Value'

//删除key-value
urlParams.searchParams.delete("spm2"); 
urlParams.searchParams.toString(); // not_checkout=1&spm=1015.2103.3001.8066&articleId=More+webdev

选择合适的方法

选择哪种方法取决于你的具体需求和浏览器兼容性要求。通常情况下，使用 URL 对象和 URLSearchParams 是最推荐的方式，因为它们提供了简洁且易于理解的 API。而如果你需要更高的灵活性或者需要支持更古老的浏览器，可以考虑使用正则表达式或者 split 方法。

在实际应用中，你可以根据自己的情况选择最适合的方法来提取和处理 URL 中的参数。