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能够更好的理解,给出方案的多样性和质量都更高

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

相关推荐
未来之窗软件服务17 分钟前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友1 小时前
什么是断言?
前端·后端·安全
FIN66682 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4952 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1242 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树2 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66682 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER2 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰2 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木2 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js