针对本地页面如何实现高亮功能？

1. 如何实现该功能

对页面的所有元素进行深度遍历、

对其中需要高亮的文本字段替换为添加高亮css的span字段

xml 复制代码

<template>
  <div class="about">
    <label for="num1">Number 1:</label>
    <input type="number" id="num1">
    <label for="num2">Number2:</label>
    <input type="number" id="num2">
    <button @click="calculateProduct">Calculate Product</button>
    <p id="result"></p>
  </div>
</template>
<script>
export default{
  mounted () {
    // this.highLine('Number');
  },
  methods: {
    calculateProduct() {
        // const num1 = Number(document.getElementById('num1').value);
        const num1 = document.getElementById('num1').value;
        const num2 = document.getElementById('num2').value;
        const product = num1 + num2;
        this.highLine('Number')
        document.getElementById('result').textContent = `Product: ${product}`;
    },
    highLine(keyword) {
      const aboutContainer = document.querySelector('.about');
      this.highlightNumberInAbout(aboutContainer)
    },
    highlightNumberInAbout(element) {
      if (!element) return;

      if (element.nodeType === Node.TEXT_NODE) {
        // 如果当前节点是文本节点，则直接进行替换
        const textToFind = 'Number'; // 假设这是要查找的文本
        const highlightedText = 
          element.textContent.replace(
            new RegExp(`\\b${textToFind}(?![^\\w\\s])`, 'g'), 
            `<span class="highlight">${textToFind}</span>`);

        const container = document.createElement('span');
        container.innerHTML = highlightedText;

        // 替换原有文本节点
        element.parentNode.insertBefore(container, element);
        element.parentNode.removeChild(element);
      } else {
        // 如果当前节点是元素节点，递归处理其子节点
        for (let i = 0; i < element.childNodes.length; i++) {
          this.highlightNumberInAbout(element.childNodes[i]);
        }
      }
    }
  }
}

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

}
.highlight{
  background-color: yellow;
}
</style>

2. 遇到的问题

Number2:和Number 2:这两种情况需要进行适配

问题原因在于使用正则表达式的时候，仅能将Number 2:中的Number进行替换

对正则表达式进行优化后，即可满足需求。

具体优化方式，在GPT中提问：element.textContent存在Number 1:和Number2:两种情况，需要保证两种情况都能高亮

3.反思

向GPT提问有两种方式

沿着一个问题不断的深入，如我定位到了问题在正则匹配这块，于是不断提出我遇到的问题，要求GPT修正正则表达式
重新表达自己的要求，完善自己的请求，如我后面的提问，强调了具体需要考虑的场景

就今天问题的解决而言，第二种方式效率更高，GPT能够更好的理解，给出方案的多样性和质量都更高

第一种方案，在解决新的问题，并不兼容处理之前的需求

0410:如何实现页面高亮

1. 如何实现该功能

2. 遇到的问题

3.反思