动态更新URL中的用户输入数量：JavaScript实现教程

<table class="products_list">
  <tr class="product_list--item">
    <td> 12486XC4 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span>   </td>
    <td> <input class="item_qty" type="number" min="1" max="100" value="1" size="5" />   </td>
    <td> <a href="https://www.example.com/checkout/?1[sku]=12486XC4&1[qty]=1">Add to cart</a> </td>
  </tr>
  <tr class="product_list--item">
    <td> 13486XC5 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span>   </td>
    <td> <input class="item_qty" type="number" min="1" max="100" value="1" size="5" />   </td>
    <td> <a href="https://www.example.com/checkout/?1[sku]=13486XC5&1[qty]=1">Add to cart</a> </td>
  </tr>
  <tr class="product_list--item">
    <td> 14486XC6 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span>   </td>
    <td> <input class="item_qty" type="number" min="1" max="100" value="1" size="5" />   </td>
    <td> <a href="https://www.example.com/checkout/?1[sku]=14486XC6&1[qty]=1">Add to cart</a> </td>
  </tr>
</table>

/**
 * 在字符串中添加斜杠来转义指定的特殊字符。
 * 主要用于构建正则表达式，以正确匹配包含特殊字符（如方括号）的URL参数名。
 * @param {string} string 要处理的原始字符串。
 * @param {string[]} charsToEscape 包含需要转义的字符的数组。
 * @returns {string} 转义后的字符串。
 */
function addSlashes(string, charsToEscape) {
  let finalString = string;
  // 遍历需要转义的字符数组
  for (let i = 0; i < charsToEscape.length; i++) {
    // 使用全局替换，将每个特殊字符替换为转义后的版本
    finalString = finalString.replace(new RegExp('\' + charsToEscape[i], 'g'), '\' + charsToEscape[i]);
  }
  return finalString;
}

/**
 * 更新或添加URL中的查询参数。
 * 如果参数已存在，则更新其值；否则，添加新参数。
 * @param {string} uri 原始URL。
 * @param {string} key 要更新或添加的参数名。
 * @param {string} value 参数的新值。
 * @returns {string} 更新后的URL。
 */
function updateQueryStringParameter(uri, key, value) {
  // 转义参数名中的特殊字符，例如 `[` 和 `]`，以便在正则表达式中正确匹配
  let escapedKey = addSlashes(key, ["[", "]"]);
  // 构建正则表达式，匹配 `?key=value` 或 `&key=value` 形式的参数
  // `$1` 捕获 `?` 或 `&`，`$2` 捕获 `&` 或字符串末尾
  let re = new RegExp("([?&])" + escapedKey + "=.*?(&|$)", "i");
  // 确定是使用 `?` 还是 `&` 作为分隔符
  let separator = uri.indexOf('?') !== -1 ? "&" : "?";

  // 如果URL中已存在该参数
  if (uri.match(re)) {
    // 替换旧的参数值
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    // 否则，在URL末尾添加新参数
    return uri + separator + key + "=" + value;
  }
}

/**
 * 更新产品数量的显示文本。
 * @param {HTMLElement} element 显示数量的DOM元素。
 * @param {string} text 要显示的文本。
 */
function displayQuantityForProduct(element, text = "") {
  element.textContent = text;
}

// 获取所有具有 'item_qty' 类的数量输入框
const inputs = document.querySelectorAll(".product_list--item .item_qty");
const length = inputs.length;

// 为每个数量输入框添加 'input' 事件监听器
for (let i = 0; i < length; i++) {
  inputs[i].addEventListener("input", function() {
    // 检查输入值是否有效：非空且是大于等于1的整数
    if (this.value && parseInt(this.value) >= 1) {
      // 定义要更新的参数名，这里是固定的 '1[qty]'
      let selfName = "1[qty]";
      // 获取当前输入框所在的最近的产品行 (tr元素)
      let productRow = this.closest(".product_list--item");
      // 获取产品行中的所有子元素 (td元素)
      let children = productRow.children;

      // 根据HTML结构定位数量显示元素和“加入购物车”链接
      // children[1] 是包含数量显示span的td
      let displayQty = children[1].firstElementChild;
      // children[3] 是包含“加入购物车”链接的td
      let addToCartLink = children[3].firstElementChild;

      // 使用 updateQueryStringParameter 函数更新链接的href属性
      let newUri = updateQueryStringParameter(
        addToCartLink.getAttribute("href"), // 获取原始链接
        selfName, // 要更新的参数名
        this.value // 用户输入的新数量
      );

      // 更新页面上显示的数量
      displayQuantityForProduct(displayQty, this.value);
      // 将更新后的URI设置回链接的href属性
      addToCartLink.setAttribute("href", newUri);
    }
  });
}