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

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

相关推荐
清风细雨_林木木16 分钟前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
大熊猫侯佩18 分钟前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple
BillKu1 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
Codebee1 小时前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊1 小时前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius1 小时前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
littleplayer1 小时前
Redux 中›ABC三个页面是如何通信的?
前端
安卓开发者1 小时前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos
程序员NEO1 小时前
3分钟搞定Vue组件库
前端