JS实现URL参数比较by ChatGPT

最新推荐文章于 2024-06-14 15:02:13 发布

squanchs

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量152

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_33447234/article/details/131050696

版权

<!DOCTYPE html>
<html>
<head>
  <title>URL参数比较</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <h1>URL参数比较</h1>
  <div id="comparisonResult"></div>
  
  <script>
    function compareURLParameters() {
      var url1 = document.getElementById('url1').value;
      var url2 = document.getElementById('url2').value;
      
      var params1 = getUrlParameters(url1);
      var params2 = getUrlParameters(url2);
      
      var comparisonResult = document.getElementById('comparisonResult');
      comparisonResult.innerHTML = '';

      var table = document.createElement('table');
      var headerRow = document.createElement('tr');
      
      var header1 = document.createElement('th');
      header1.textContent = '参数';
      headerRow.appendChild(header1);
      
      var header2 = document.createElement('th');
      header2.textContent = 'URL 1';
      headerRow.appendChild(header2);
      
      var header3 = document.createElement('th');
      header3.textContent = 'URL 2';
      headerRow.appendChild(header3);
      
      table.appendChild(headerRow);
      
      var parametersMatch = true;
      
      for (var param in params1) {
        var row = document.createElement('tr');
        
        var paramName = document.createElement('td');
        paramName.textContent = param;
        row.appendChild(paramName);
        
        var paramValue1 = document.createElement('td');
        paramValue1.textContent = params1[param];
        row.appendChild(paramValue1);
        
        var paramValue2 = document.createElement('td');
        paramValue2.textContent = params2[param];
        row.appendChild(paramValue2);
        
        if (params1[param] !== params2[param]) {
          row.style.backgroundColor = '#FFC0C0';
          parametersMatch = false;
        }
        
        table.appendChild(row);
      }
      
      comparisonResult.appendChild(table);
      
      var matchStatus = document.createElement('p');
      matchStatus.textContent = '参数完全一致：' + parametersMatch;
      matchStatus.style.fontWeight = 'bold';
      
      if (parametersMatch) {
        matchStatus.style.color = 'green';
      } else {
        matchStatus.style.color = 'red';
      }
      
      comparisonResult.insertBefore(matchStatus, table);
    }
    
    function getUrlParameters(url) {
      var paramArray = {};
      var params = url.slice(url.indexOf('?') + 1).split('&');
      
      for (var i = 0; i < params.length; i++) {
        var param = params[i].split('=');
        var key = decodeURIComponent(param[0]);
        var value = decodeURIComponent(param[1]);
        
        paramArray[key] = value;
      }
      
      return paramArray;
    }
  </script>
  
  <h2>URL 1</h2>
  <input type="text" id="url1" placeholder="输入URL 1">
  <h2>URL 2</h2>
  <input type="text" id="url2" placeholder="输入URL 2">
  <br><br>
  <button onclick="compareURLParameters()">比较参数</button>
</body>
</html>