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

本贴最后更新于 435 天前,其中的信息可能已经水流花落

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

微信截图 20241013192054.png

  • 思源笔记

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

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

    28447 引用 • 119791 回帖
  • Q&A

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

    11156 引用 • 50667 回帖 • 52 关注

相关帖子

被采纳的回答

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 请问标签搜索界面如何通过 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

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

    1 回复
  • 右侧去掉,参考刚才帖子 请问标签搜索界面如何通过 css 隐藏重复显示? - wilsons 的回帖

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

    如图,image.png

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

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

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

推荐标签 标签

  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • 周末

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

    14 引用 • 297 回帖 • 1 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    173 引用 • 1559 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 838 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 623 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    40 引用 • 157 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    269 引用 • 666 回帖 • 1 关注
  • MyBatis

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

    174 引用 • 414 回帖 • 344 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    95 引用 • 122 回帖 • 634 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 565 关注
  • 创业

    你比 99% 的人都优秀么?

    81 引用 • 1396 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 740 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1746 回帖 • 10 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 284 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 51 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 768 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    119 引用 • 54 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 60 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 5 关注
  • Follow
    4 引用 • 13 回帖 • 19 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 2 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    9 引用 • 75 回帖
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 376 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 27 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 15 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    200 引用 • 545 回帖 • 1 关注