如何将HTML文本框值传入JavaScript解码函数并正确调用？

问题背景 #

已有可独立运行的decodeUrlDefensev3函数，能正确解码urldefense v3格式的URL，但在搭建无后端HTML页面时，点击解码按钮出现Uncaught TypeError: Cannot read properties of null (reading '1')错误，无法实现用户输入编码URL、点击按钮显示解码结果的功能。

原解码函数代码：

function decodeUrlDefensev3(link) {
  var matches = link.match(new RegExp('v3/__(.+?)__;(.*?)!'))

  var decode_pile = Array.from(matches[1]);
  var chars_pile = Array.from(atob(matches[2])).reverse();

  for (var match of link.matchAll(/\*/g)) {
    decode_pile[match.index] = match.pop()
  }

  return decode_pile.join('')
}

错误原因 #

1. 页面加载时就提前获取了文本框的默认值（非目标格式URL），导致函数中match返回null，访问matches[1]触发报错
2. 按钮点击时传递的是页面加载时的旧值，而非用户输入的最新编码URL
3. 缺少专门的结果展示区域，解码后无输出渠道

修正后的完整代码 #

HTML结构 #

<input type="text" id="textbox1" placeholder="输入urldefense v3格式的URL" style="width: 80%; padding: 8px; margin: 10px 0;" />
<button onclick="handleDecode()" style="padding: 8px 16px;">解码URL</button>
<div id="result" style="margin-top: 15px; padding: 10px; border: 1px solid #ccc; min-height: 50px; white-space: pre-wrap;"></div>

JavaScript逻辑 #

function decodeUrlDefensev3(link) {
  var matches = link.match(new RegExp('v3/__(.+?)__;(.*?)!'));

  // 增加格式校验，避免匹配失败报错
  if (!matches || matches.length < 3) {
    throw new Error("输入的URL不符合urldefense v3格式");
  }

  var decode_pile = Array.from(matches[1]);
  var chars_pile = Array.from(atob(matches[2])).reverse();

  for (var match of link.matchAll(/\*/g)) {
    decode_pile[match.index] = match.pop();
  }

  return decode_pile.join('');
}

function handleDecode() {
  const inputUrl = document.getElementById('textbox1').value.trim();
  const resultElement = document.getElementById('result');
  
  try {
    if (!inputUrl) {
      resultElement.textContent = "请输入需要解码的URL";
      return;
    }
    const decodedUrl = decodeUrlDefensev3(inputUrl);
    resultElement.textContent = decodedUrl;
  } catch (error) {
    resultElement.textContent = `解码失败：${error.message}`;
  }
}

修正说明 #

• 新增handleDecode作为按钮点击事件处理函数，在点击时才获取文本框的最新输入值
• 给解码函数添加格式校验逻辑，匹配失败时抛出明确错误信息
• 新增结果展示区域，成功时显示解码后的URL，失败时显示错误提示
• 移除页面加载时提前获取输入值的代码，避免使用过期数据

内容的提问来源于stack exchange，提问作者Gregory Carlton