如何去掉标签搜索界面的标识?

如图中红色框中的标识,非常影响观感,求大佬如何去掉它们。

微信截图 20241013192054.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22926 引用 • 92174 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8404 引用 • 38297 回帖 • 156 关注

相关帖子

被采纳的回答

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 右侧去掉,参考刚才帖子 请问标签搜索界面如何通过 css 隐藏重复显示? - wilsons 的回帖

    左侧不建议去掉,因为这是搜索关键词,当某行只有一个标签内容时,如果把关键词去掉就空白了。

    如图,image.png

    当然,如果第一种情况关键词标签去掉,第二种不去掉,也挺奇怪的,会导致同样的功能不一致,非常不建议这样做。

    1 回复
    1 操作
    wilsons 在 2024-10-13 21:51:01 更新了该回帖
  • i1356

    麻烦大佬给出 js 代码,我试试效果

    1 回复
  • wilsons 1

    请问标签搜索界面如何通过 css 隐藏重复显示? - wilsons 的回帖 的基础上添加了下面的代码

    // 左侧去掉搜索关键词标签,仅去掉除了标签关键词,还有其他文本的行
             const contextEl = element.querySelector('.b3-list-item__text');
             if(contextEl){
                 const markEl = contextEl.querySelector('mark');
                 if(markEl && markEl.textContent.indexOf('#') !== -1){
                     // 使用正则表达式匹配并移除零宽度空格
                     const contextText = contextEl.textContent.replace(/^\u200B+|\u200B+$/g, '');
                     const markText = markEl.textContent.replace(/^\u200B+|\u200B+$/g, '');
                     const onlyMark = contextText.replace(new RegExp(`${markText}`, 'g'), '').replace(/^\u200B+|\u200B+$/g, '').trim();
                     if(contextText !== markText && onlyMark){
                         contextEl.querySelectorAll('mark').forEach(item => {
                             item.style.display = 'none';
                         });
                     }
                 }
            }
    

    完整代码如下

    (()=>{
        // 监听搜索项出现
        observeElementExist('div[data-type="search-item"]', (element) => {
            // 左侧去掉搜索关键词标签,仅去掉除了标签关键词,还有其他文本的行
             const contextEl = element.querySelector('.b3-list-item__text');
             if(contextEl){
                 const markEl = contextEl.querySelector('mark');
                 if(markEl && markEl.textContent.indexOf('#') !== -1){
                     // 使用正则表达式匹配并移除零宽度空格
                     const contextText = contextEl.textContent.replace(/^\u200B+|\u200B+$/g, '');
                     const markText = markEl.textContent.replace(/^\u200B+|\u200B+$/g, '');
                     const onlyMark = contextText.replace(new RegExp(`${markText}`, 'g'), '').replace(/^\u200B+|\u200B+$/g, '').trim();
                     if(contextText !== markText && onlyMark){
                         contextEl.querySelectorAll('mark').forEach(item => {
                             item.style.display = 'none';
                         });
                     }
                 }
            }
      
            // 右侧去掉重复
            const ariaLabel = element.querySelector('.b3-list-item__meta:last-child');
            if(!ariaLabel) return;
            const itemText = element.querySelector('.b3-list-item__text')?.textContent || '';
            if(!itemText) return;
            const paths = ariaLabel?.textContent?.split('/');
            if(!paths) return;
            const lastPath = paths?.pop();
            if(!lastPath) return;
            if(itemText !== lastPath) return;
            ariaLabel.textContent = paths.join('/');
        });
        // 监听元素出现
        function observeElementExist(selector, callback) {
            const handleMutations = (mutationsList, observer) => {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        mutation.addedNodes.forEach(node => {
                            if (node.matches && node.matches(selector)) {
                                callback(node);
                                //observer.disconnect(); // 一旦找到元素,停止监听
                            }
                        });
                    }
                }
            };
      
            // 创建一个MutationObserver实例
            const config = { attributes: false, childList: true, subtree: true };
            const observer = new MutationObserver(handleMutations);
      
            // 选择需要监听的父节点
            const targetNode = document.body; // 或者选择其他合适的父节点
      
            // 开始监听目标节点的变化
            observer.observe(targetNode, config);
        }
    })();
    
    1 回复
    1 操作
    wilsons 在 2024-10-13 22:59:59 更新了该回帖
  • i1356

    大佬牛。正是想要的效果。感谢

推荐标签 标签

  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 384 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 612 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 726 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    34 引用 • 148 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 79 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 210 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 685 关注
  • 导航

    各种网址链接、内容导航。

    42 引用 • 175 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 335 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 161 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 626 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    149 引用 • 257 回帖 • 1 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    313 引用 • 547 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    92 引用 • 899 回帖
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    156 引用 • 3792 回帖 • 1 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 400 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 430 回帖