如何使用JavaScript为指定锚链接追加当前页面的URL参数

Hey Steve, here's a robust way to achieve what you're looking for using JavaScript's built-in URL API, which handles edge cases (like if the target URL already has existing parameters) cleanly:

Step-by-Step Solution #

First, we'll use the URL and URLSearchParams APIs to safely modify the anchor's href without manually string-concatenating parameters (which can lead to invalid URLs).

Full Code Example #

// Wait for the DOM to fully load before accessing elements
document.addEventListener('DOMContentLoaded', () => {
  // Get all search parameters from the current page URL
  const currentPageParams = new URLSearchParams(window.location.search);
  
  // Select your target anchor button using the provided selector
  const targetAnchor = document.querySelector('#ptsBlock_553944 .ptsCell:nth-of-type(1) .ptsEditArea.ptsInputShell');
  
  // Make sure the anchor exists before modifying it
  if (targetAnchor) {
    // Create a URL object from the anchor's current href
    const updatedUrl = new URL(targetAnchor.href);
    
    // Add each parameter from the current page to the target URL
    currentPageParams.forEach((value, key) => {
      updatedUrl.searchParams.append(key, value);
    });
    
    // Update the anchor's href with the new URL
    targetAnchor.href = updatedUrl.toString();
    
    // Optional: Verify the change in the console
    console.log('New anchor href:', targetAnchor.href);
  } else {
    console.error('Could not find the target anchor element. Double-check the selector!');
  }
});

Breakdown of the Code #

• DOMContentLoaded Event: Ensures we don't try to access the anchor element until the page's HTML has fully loaded (prevents "element not found" errors).
• URLSearchParams: Extracts all query parameters from the current page's URL in a structured way.
• document.querySelector(): Finds your target anchor using the exact selector you provided.
• URL Object: Lets us safely modify the target anchor's href without worrying about invalid URL formatting (e.g., handling existing ? or & characters automatically).
• Parameter Appending: Iterates over each parameter from the current page and adds it to the target URL's query string.

If You Want a Simpler Approach (For Target URLs Without Existing Params) #

If you're certain the target anchor's href never has its own query parameters, you can simplify the code to just append the current page's search string directly:

document.addEventListener('DOMContentLoaded', () => {
  const targetAnchor = document.querySelector('#ptsBlock_553944 .ptsCell:nth-of-type(1) .ptsEditArea.ptsInputShell');
  const currentSearchString = window.location.search;
  
  if (targetAnchor && currentSearchString) {
    targetAnchor.href += currentSearchString;
  }
});

Note: This won't work correctly if the target URL already has query parameters (it would create a malformed URL like https://example.com/form?existing=val?new=val), so the first method is always preferred for robustness.

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