如何使用 Javascript 替換網頁中的特定鏈接

Question

我正在嘗試制作一個 chrome 擴展腳本來掃描網頁以查找特定的可點擊鏈接，如果它們匹配，則將它們替換為其他鏈接。

這是我用一個最小可重復示例更新這篇文章后的內容（在下面更新），但它僅適用於 function rewritePage1，它基於我收到的指定outerHTML的答案。 謝謝！

 var matcher = "alias text"
      var newText = "true text";
      function replaceText(selector, text, newText, flags) {
      //var matcher = new RegExp(text, flags);
      var elems = document.querySelectorAll(selector), i;
    
      for (i = 0; i < elems.length; i++)
        if (!elems[i].childNodes.length)
          elems[i].innerHTML = elems[i].innerHTML.replace(matcher, newText);
    }

更新的測試網頁：

    <html>
    <h1>test webpage</h1>
    <p>alias text</p>
    <a href="https://yahoo.com">alias test 1</a>
    <p><a href="https://bing.com">alias test 2</a></p>
    </html>

更新清單文件：

 {
      "name": "OzWizard3",
      "action": {},
      "manifest_version": 3,
      "version": "0.1",
      "description": "demo to replace specific urls on a webpage.",
      "permissions": [
    "activeTab",
    "scripting",
    "clipboardRead",
    "clipboardWrite"
  ],
  "background": {
    "service_worker": "ozwizard3.js"
  }
}

更新了測試兩個答案的主腳本：

//chrome extension runs when activated by clicking extension icon.
//lookup a url in a database or dictionary as key.
//If found a match on the page, replace it with the value of that key.

function rewritePage1() {
let urlLinksToChange = 'https://yahoo.com';
let replaceWithThisElement = `<a href="https://google.com" style="color:red">Replaced!</a>`;
let linksToChange = document.querySelectorAll(`a[href*="${urlLinksToChange}"]`)
linksToChange.forEach(l => {
     l.outerHTML = replaceWithThisElement;
});
}

function rewritePage2(){
  var matcher = "https://bing.com"
  var newText = "https://yahoo.com";

  function replaceText(text, newText) {
      // get all links with specific urls
      var links = document.querySelectorAll(`a[href*="${text}"]`);
      // loop through all links
      for (var i = 0; i < links.length; i++) {
          // get the href
          var href = links[i].getAttribute('href');
          // replace the href
          links[i].setAttribute('href', newText);
      }
  }
}

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: rewritePage1
  });
});

Answer 1

以下是您可以替換特定網址的代碼。

Html

link: <a href="https://bing.com">bing</a>
link: <a href="https://bing.com">bing</a>
link: <a href="https://bing.com">bing</a>

腳本

var matcher = "https://bing.com"
var newText = "https://google.com";

function replaceText(text, newText) {
    // get all links with specific urls
    var links = document.querySelectorAll(`a[href*="${text}"]`);
    // loop through all links
    for (var i = 0; i < links.length; i++) {
        // get the href
        var href = links[i].getAttribute('href');
        // replace the href
        links[i].setAttribute('href', newText);
    }
}

Answer 2

如果你想替換整個元素，而不僅僅是它的 URL，那么我們可以使用outerHTML 。

例如，如果我們要替換所有以https://meta. 並替換為<a href="https://google.com" style="color:red">Replaced!</a> 。 我們會這樣做：

let urlLinksToChange = 'https://meta.';
let replaceWithThisElement = `<a href="https://google.com" style="color:red">Replaced!</a>`;
let linksToChange = document.querySelectorAll(`a[href*="${urlLinksToChange}"]`)
linksToChange.forEach(l => { 
     l.outerHTML = replaceWithThisElement;
});

innerHTML 與outerHTML 之間的區別在於innerHTML 修改了節點的內部，而outerHTML 修改了整個節點本身。

資料來源： https://ravisah.in/blog/what-is-the-difference-between-innerhtml-and-outerhtml

如何使用 Javascript 替換網頁中的特定鏈接

問題描述

2 個解決方案

解決方案1
0 2021-11-21 17:44:43

解決方案2
0 已采納 2021-11-21 20:00:06

如何使用 Javascript 替換網頁中的特定鏈接

問題描述

2 個解決方案

解決方案1 0 2021-11-21 17:44:43

解決方案2 0 已采納 2021-11-21 20:00:06

解決方案1
0 2021-11-21 17:44:43

解決方案2
0 已采納 2021-11-21 20:00:06