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

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

相关推荐
万邦科技Lafite14 分钟前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
一只小透明啊啊啊啊3 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友3 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao4 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子4 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...4 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪4 小时前
函数组件和异步组件
前端·javascript·面试
淮北4944 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友4 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei5 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发