0410:如何实现页面高亮

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

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提问有两种方式

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

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

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

相关推荐
mCell10 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip10 小时前
Node.js 子进程:child_process
前端·javascript
excel14 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel15 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼16 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙17 小时前
[译] Composition in CSS
前端·css
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix17 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780017 小时前
new、原型和原型链浅析
前端·javascript