使用 GPT 寫(xiě)代碼：高亮頁(yè)面關(guān)鍵字

作者：Candy 2023-05-31 11:38:45

目前這種使用方式的效率還有待提升。整個(gè)過(guò)程耗費(fèi)了 1 個(gè)多小時(shí)，寫(xiě)了不到 100 行代碼。在對(duì)話的過(guò)程中，還需要將代碼復(fù)制到 IDE 中，這并沒(méi)有將 GPT 和 IDE 串聯(lián)起來(lái)。

最近用戶(hù)跟我反饋了一個(gè)問(wèn)題，他們使用的瀏覽器高亮關(guān)鍵字的插件在我們的網(wǎng)站不生效，我看了一下，因?yàn)槭褂昧?webComponent 但插件沒(méi)有進(jìn)行兼容。他們說(shuō)這個(gè)功能非常重要，因此，我們就要在系統(tǒng)內(nèi)自己實(shí)現(xiàn)高亮頁(yè)面關(guān)鍵字。

在做一個(gè)新功能的時(shí)候，首先要先調(diào)研一下方案。

但在網(wǎng)上找了一圈，發(fā)現(xiàn)基本上都是以下這種方案：

// js部分
var bodyContent = document.body.innerHTMl;  // 獲取頁(yè)面內(nèi)容
var pattern = new RegExp('關(guān)鍵字', 'g'); // 生成正則表達(dá)式
// 匹配關(guān)鍵詞并替換
document.body.innerHTMl = bodyContent.replace(pattern, '<span class="highlight">$&</span>');

在 innerHTML 匹配關(guān)鍵字，將關(guān)鍵字替換成高亮的 span，然后重新替換 innerHTML 這樣實(shí)現(xiàn)雖然非常簡(jiǎn)單，但會(huì)導(dǎo)致 shadowRoot 和 iframe 失效。

于是我決定問(wèn)問(wèn) GPT，看看它能不能給我一點(diǎn)驚喜

使用 GPT 編寫(xiě)代碼

我：我要寫(xiě)一段 js 代碼，傳入指定的文本，在整個(gè)頁(yè)面高亮

GPT：你可以使用 JavaScript 中的 DOM 操作來(lái)實(shí)現(xiàn)這個(gè)功能。以下是一段示例代碼：

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;

  while ((match = regex.exec(body.innerText))) {
    const span = document.createElement('span');
    span.style.backgroundColor = 'yellow';
    span.textContent = match[0];
    const range = document.createRange();
    range.setStart(body, match.index);
    range.setEnd(body, regex.lastIndex);
    range.deleteContents();
    range.insertNode(span);
  }
}

這段代碼會(huì)將頁(yè)面中所有匹配指定文本的文本節(jié)點(diǎn)用黃色高亮顯示。你可以將需要高亮的文本作為參數(shù)傳入 highlightText 函數(shù)中，例如：

highlightText('JavaScript');

點(diǎn)評(píng)：代碼是寫(xiě)出來(lái)了，用了一個(gè)我還沒(méi)見(jiàn)過(guò)的 API。。。趕緊學(xué)習(xí)了一下原理是：用 Range API 去選擇對(duì)應(yīng)的文本，然后使用 Range API 刪除和新增高亮節(jié)點(diǎn)，思路看起來(lái)是沒(méi)問(wèn)題的，而且跟網(wǎng)上找到的不同

撤銷(xiāo)高亮

我：還要能夠撤銷(xiāo)高亮

GPT：好的，為了實(shí)現(xiàn)撤銷(xiāo)高亮的功能，我們可以在高亮文本時(shí)將每個(gè)被高亮的文本節(jié)點(diǎn)保存到一個(gè)數(shù)組中，然后在需要撤銷(xiāo)高亮?xí)r，遍歷這個(gè)數(shù)組，將每個(gè)高亮的文本節(jié)點(diǎn)恢復(fù)到原來(lái)的狀態(tài)。

以下是修改后的代碼：

let highlightedNodes = [];

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;

  while ((match = regex.exec(body.innerText))) {
    const span = document.createElement('span');
    span.style.backgroundColor = 'yellow';
    span.textContent = match[0];
    const range = document.createRange();
    range.setStart(body, match.index);
    range.setEnd(body, regex.lastIndex);
    range.deleteContents();
    range.insertNode(span);
    regex.lastIndex -= match[0].length - span.textContent.length;
    highlightedNodes.push(span);
  }
}

function clearHighlight() {
  while (highlightedNodes.length > 0) {
    const node = highlightedNodes.pop();
    const parent = node.parentNode;
    parent.replaceChild(node.firstChild, node);
    parent.normalize();
  }
}

點(diǎn)評(píng)：牛逼，GPT 還是很聰明的，居然還會(huì)把 span 存起來(lái)，用于撤銷(xiāo)高亮，這個(gè)思路也是非常的正確的。

Range 范圍算不準(zhǔn)

但是實(shí)際運(yùn)行后，這段代碼是會(huì)報(bào)錯(cuò)的，我排查了一下，發(fā)現(xiàn)計(jì)算出來(lái)的 Range 的 start 和 end 的位置是錯(cuò)誤的，于是我跟 GPT 說(shuō)一下，看看它如何糾正

我：算不準(zhǔn) start 和 end 的位置

GPT：如果 setStart 和 setEnd 方法的位置計(jì)算不準(zhǔn)確，可能是因?yàn)樵谟?jì)算位置時(shí)沒(méi)有考慮到文本節(jié)點(diǎn)之間的空格和換行符。在這種情況下，你可以使用 createTreeWalker 方法來(lái)遍歷文檔樹(shù)中的所有文本節(jié)點(diǎn)，并計(jì)算出每個(gè)文本節(jié)點(diǎn)的起始和結(jié)束位置。

以下是一段示例代碼：

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;

  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null, false);
  while (walker.nextNode()) {
    const node = walker.currentNode;
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      range.deleteContents();
      range.insertNode(span);
    }
  }
}

在這個(gè)修改后的代碼中，我們使用 createTreeWalker 方法來(lái)遍歷文檔樹(shù)中的所有文本節(jié)點(diǎn)。對(duì)于每個(gè)文本節(jié)點(diǎn)，我們使用 exec 方法來(lái)查找匹配指定文本的子串，并將每個(gè)匹配的子串用黃色高亮顯示。在計(jì)算位置時(shí)，我們使用 setStart 和 setEnd 方法來(lái)設(shè)置范圍的起始和結(jié)束位置，以確保高亮顯示的文本范圍正確。

點(diǎn)評(píng)：有點(diǎn)東西，我其實(shí)是不知道為什么算不準(zhǔn) start 和 end 的位置，但 GPT 自己也能發(fā)現(xiàn)問(wèn)題，并且給出了另一個(gè)解決方案，并且非常貼心解析了這段代碼

根據(jù) GPT 的提示，是空字符的文本節(jié)點(diǎn)導(dǎo)致的問(wèn)題，跟 GPT 提出的假設(shè)類(lèi)似。

頁(yè)面卡死

但我把上面代碼運(yùn)行，發(fā)現(xiàn)頁(yè)面卡死了，原因是，在 TreeWalker 遍歷過(guò)程中，新增了高亮節(jié)點(diǎn)，然后又進(jìn)入高亮節(jié)點(diǎn)進(jìn)行遍歷，然后又創(chuàng)建高亮節(jié)點(diǎn)。。。

因此應(yīng)該在 TreeWalker 遍歷節(jié)點(diǎn)之后再進(jìn)行高亮節(jié)點(diǎn)替換，于是我讓 GPT 繼續(xù)改

我：在 TreeWalker 遍歷過(guò)程中修改節(jié)點(diǎn)，會(huì)遍歷到新節(jié)點(diǎn)，需要延遲修改節(jié)點(diǎn)

GPT：是的，你說(shuō)的很對(duì)。在 TreeWalker 遍歷過(guò)程中修改節(jié)點(diǎn)，會(huì)導(dǎo)致遍歷到新節(jié)點(diǎn)，從而可能會(huì)出現(xiàn)意外的結(jié)果。為了避免這種情況，我們可以將需要修改的節(jié)點(diǎn)保存到一個(gè)數(shù)組中，在遍歷完成后再對(duì)這些節(jié)點(diǎn)進(jìn)行修改。

以下是一段示例代碼：

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;

  const nodesToHighlight = [];

  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null, false);
  while (walker.nextNode()) {
    const node = walker.currentNode;
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      range.deleteContents();
      range.insertNode(span);
      nodesToHighlight.push(span);
    }
  }

  nodesToHighlight.forEach(node => {
    const parent = node.parentNode;
    parent.replaceChild(node.firstChild, node);
    parent.normalize();
  });
}

在這個(gè)修改后的代碼中，我們新增了一個(gè)名為 nodesToHighlight 的數(shù)組，用于保存需要高亮的節(jié)點(diǎn)。在遍歷過(guò)程中，每當(dāng)找到一個(gè)需要高亮的節(jié)點(diǎn)時(shí)，我們將這個(gè)節(jié)點(diǎn)添加到 nodesToHighlight 數(shù)組中。在遍歷完成后，我們遍歷 nodesToHighlight 數(shù)組，對(duì)每個(gè)節(jié)點(diǎn)進(jìn)行高亮處理。

這樣做可以確保在遍歷過(guò)程中不會(huì)修改節(jié)點(diǎn)，從而避免出現(xiàn)意外的結(jié)果。

點(diǎn)評(píng)：改了，但沒(méi)完全改好，TreeWalker 中仍然有修改 DOM 的操作，于是我換了個(gè)說(shuō)法

我：不能在遍歷過(guò)程中調(diào)用 deleteContents 和 insertNode

GPT：是的，你說(shuō)的很對(duì)。在遍歷過(guò)程中調(diào)用 deleteContents 和 insertNode 方法，會(huì)導(dǎo)致遍歷到新節(jié)點(diǎn)，從而可能會(huì)出現(xiàn)意外的結(jié)果。為了避免這種情況，我們可以將需要修改的節(jié)點(diǎn)保存到一個(gè)數(shù)組中，在遍歷完成后再對(duì)這些節(jié)點(diǎn)進(jìn)行修改。

以下是一段示例代碼：

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;

  const nodesToHighlight = [];

  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
    acceptNode: function(node) {
      if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
        return NodeFilter.FILTER_REJECT;
      }
      return NodeFilter.FILTER_ACCEPT;
    }
  }, false);

  while (walker.nextNode()) {
    const node = walker.currentNode;
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      nodesToHighlight.push({ range, span });
      regex.lastIndex -= match[0].length - span.textContent.length;
    }
  }

  setTimeout(() => {
    nodesToHighlight.forEach(({ range, span }) => {
      range.deleteContents();
      range.insertNode(span);
    });
  }, 0);
}

在這個(gè)修改后的代碼中，我們新增了一個(gè)名為 nodesToHighlight 的數(shù)組，用于保存需要高亮的節(jié)點(diǎn)和它們對(duì)應(yīng)的范圍。在遍歷過(guò)程中，每當(dāng)找到一個(gè)需要高亮的節(jié)點(diǎn)時(shí)，我們將這個(gè)節(jié)點(diǎn)和它對(duì)應(yīng)的范圍添加到 nodesToHighlight 數(shù)組中。在遍歷完成后，我們使用 setTimeout 方法將對(duì)節(jié)點(diǎn)的修改延遲到下一個(gè)事件循環(huán)中執(zhí)行。

這樣做可以確保在遍歷過(guò)程中不會(huì)修改節(jié)點(diǎn)，從而避免出現(xiàn)意外的結(jié)果。同時(shí)，使用 setTimeout 方法可以將對(duì)節(jié)點(diǎn)的修改延遲到下一個(gè)事件循環(huán)中執(zhí)行，從而確保在修改節(jié)點(diǎn)時(shí)不會(huì)影響遍歷過(guò)程。

點(diǎn)評(píng)：這段代碼終于能運(yùn)行了，非常的優(yōu)秀！

支持 shadowRoot

我：但這樣還不能遍歷 webComponent shadowRoot 里面的元素

GPT：

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;

  const nodesToHighlight = [];

  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
    acceptNode: function(node) {
      if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
        return NodeFilter.FILTER_REJECT;
      }
      return NodeFilter.FILTER_ACCEPT;
    }
  }, false);

  while (walker.nextNode()) {
    const node = walker.currentNode;
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      nodesToHighlight.push({ range, span });
      regex.lastIndex -= match[0].length - span.textContent.length;
    }
  }

  const shadowHosts = document.querySelectorAll('*');
  shadowHosts.forEach(shadowHost => {
    const shadowRoot = shadowHost.shadowRoot;
    if (shadowRoot) {
      const walker = document.createTreeWalker(shadowRoot, NodeFilter.SHOW_TEXT, {
        acceptNode: function(node) {
          if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
            return NodeFilter.FILTER_REJECT;
          }
          return NodeFilter.FILTER_ACCEPT;
        }
      }, true);

      while (walker.nextNode()) {
        const node = walker.currentNode;
        while ((match = regex.exec(node.nodeValue))) {
          const span = document.createElement('span');
          span.style.backgroundColor = 'yellow';
          span.textContent = match[0];
          const range = document.createRange();
          range.setStart(node, match.index);
          range.setEnd(node, regex.lastIndex);
          nodesToHighlight.push({ range, span });
        }
      }
    }
  });

  setTimeout(() => {
    nodesToHighlight.forEach(({ range, span }) => {
      range.deleteContents();
      range.insertNode(span);
    });
  }, 0);
}

在這個(gè)修改后的代碼中，我們使用 querySelectorAll 方法來(lái)獲取所有元素，然后對(duì)于每個(gè)元素，我們**檢查它是否有 shadowRoot**。如果有，我們使用 createTreeWalker 方法來(lái)遍歷它的 shadowRoot 中的所有文本節(jié)點(diǎn)。在遍歷過(guò)程中，我們使用與之前相同的方式來(lái)查找需要高亮的節(jié)點(diǎn)，并將它們添加到 nodesToHighlight 數(shù)組中。

這樣做可以確保遍歷到 shadowRoot 中的所有文本節(jié)點(diǎn)，并將需要高亮的節(jié)點(diǎn)保存到 nodesToHighlight 數(shù)組中。然后，我們使用 setTimeout 方法將對(duì)節(jié)點(diǎn)的修改延遲到下一個(gè)事件循環(huán)中執(zhí)行，從而確保在修改節(jié)點(diǎn)時(shí)不會(huì)影響遍歷過(guò)程。

點(diǎn)評(píng)：這段代碼也是能運(yùn)行的，很牛逼，不過(guò)沒(méi)考慮代碼的復(fù)用性，shadowRoot 的處理，可以復(fù)用普通的 DOM 的高亮邏輯

撤銷(xiāo)操作支持 shadowRoot

我：撤銷(xiāo)操作也要作用到 shadowRoot

GPT：是的，你說(shuō)的很對(duì)。如果需要對(duì) shadowRoot 中的高亮文本進(jìn)行撤銷(xiāo)操作，我們可以使用 Range 對(duì)象的 deleteContents() 方法來(lái)刪除高亮文本所在的節(jié)點(diǎn)，并將原始文本重新插入到文檔中。

以下是一段示例代碼：

function removeHighlight() {
  const highlightedSpans = document.querySelectorAll('span[style="background-color: yellow;"]');
  highlightedSpans.forEach(span => {
    const range = document.createRange();
    range.selectNode(span);
    range.deleteContents();
    range.insertNode(document.createTextNode(span.textContent));
  });

  const shadowHosts = document.querySelectorAll('*');
  shadowHosts.forEach(shadowHost => {
    if (shadowHost.shadowRoot) {
      const highlightedSpans = shadowHost.shadowRoot.querySelectorAll('span[style="background-color: yellow;"]');
      highlightedSpans.forEach(span => {
        const range = document.createRange();
        range.selectNode(span);
        range.deleteContents();
        range.insertNode(document.createTextNode(span.textContent));
      });
    }
  });
}

點(diǎn)評(píng)：代碼可以運(yùn)行，但有以下缺點(diǎn)：

? 同樣是復(fù)用性不足，
? 高亮節(jié)點(diǎn)的選擇器 span[style="background-color: yellow;"] 不太優(yōu)雅，不夠健壯但問(wèn)題不大，我自己能改hhh

highligh 函數(shù)需要支持重復(fù)調(diào)用

目前的代碼會(huì)有一個(gè)問(wèn)題，就是重復(fù)調(diào)用 highlightText，已高亮的節(jié)點(diǎn)，仍然會(huì)創(chuàng)建 span，這就會(huì)導(dǎo)致 span 重復(fù)嵌套。需要先判斷是否已經(jīng)高亮了。

我：highlightText 如果同一個(gè)值多次調(diào)用，會(huì)給文本節(jié)點(diǎn)再嵌套一層高亮節(jié)點(diǎn)，要支持重復(fù)調(diào)用不會(huì)重復(fù)嵌套節(jié)點(diǎn)

GPT：好的，如果需要支持重復(fù)調(diào)用 highlightText 函數(shù)時(shí)不會(huì)重復(fù)嵌套高亮節(jié)點(diǎn)，我們可以在每次調(diào)用函數(shù)之前先檢查文本節(jié)點(diǎn)是否已經(jīng)被高亮過(guò)，如果已經(jīng)被高亮過(guò)，則不再重復(fù)嵌套高亮節(jié)點(diǎn)。

以下是修改后的 highlightText 函數(shù)代碼：

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;

  const nodesToHighlight = [];

  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
    acceptNode: function(node) {
      if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
        return NodeFilter.FILTER_REJECT;
      }
      return NodeFilter.FILTER_ACCEPT;
    }
  }, false);

  while (walker.nextNode()) {
    const node = walker.currentNode;
    if (node.parentNode.classList.contains('highlighted')) {
      continue;
    }
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      nodesToHighlight.push({ range, span });
      regex.lastIndex -= match[0].length - span.textContent.length;
    }
  }

  const shadowHosts = document.querySelectorAll('*');
  shadowHosts.forEach(shadowHost => {
    if (shadowHost.shadowRoot) {
      const shadowRoot = shadowHost.shadowRoot;
      const walker = document.createTreeWalker(shadowRoot, NodeFilter.SHOW_TEXT, {
        acceptNode: function(node) {
          if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
            return NodeFilter.FILTER_REJECT;
          }
          return NodeFilter.FILTER_ACCEPT;
        }
      }, true);

      while (walker.nextNode()) {
        const node = walker.currentNode;
        if (node.parentNode.classList.contains('highlighted')) {
          continue;
        }
        while ((match = regex.exec(node.nodeValue))) {
          const span = document.createElement('span');
          span.style.backgroundColor = 'yellow';
          span.textContent = match[0];
          const range = document.createRange();
          range.setStart(node, match.index);
          range.setEnd(node, regex.lastIndex);
          nodesToHighlight.push({ range, span });
          regex.lastIndex -= match[0].length - span.textContent.length;
        }
      }
    }
  });

  nodesToHighlight.forEach(nodeToHighlight => {
    const range = nodeToHighlight.range;
    const span = nodeToHighlight.span;
    range.deleteContents();
    span.classList.add('highlighted');
    range.insertNode(span);
  });
}

在這個(gè)代碼中，我們添加了一個(gè)名為 highlighted 的 CSS 類(lèi)，用于標(biāo)記已經(jīng)被高亮過(guò)的文本節(jié)點(diǎn)。在每次遍歷文本節(jié)點(diǎn)時(shí)，我們檢查當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)是否已經(jīng)被標(biāo)記為 highlighted，如果是，則跳過(guò)當(dāng)前節(jié)點(diǎn)，不再重復(fù)嵌套高亮節(jié)點(diǎn)。在插入高亮節(jié)點(diǎn)時(shí)，我們還將其添加到 highlighted 類(lèi)中，以便下次遍歷時(shí)可以正確地跳過(guò)已經(jīng)被高亮過(guò)的節(jié)點(diǎn)。

點(diǎn)評(píng)：完美符合要求~我只需要稍微復(fù)用以下代碼，進(jìn)行一些小修改即可。

最終還是成為了一名代碼美化工程師~~~