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

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

微信截图 20241013192054.png

  • 思源笔记

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

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

    22927 引用 • 92177 回帖 • 1 关注
  • Q&A

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

    8404 引用 • 38299 回帖 • 156 关注

相关帖子

被采纳的回答

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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

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

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

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

    如图,image.png

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

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

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

推荐标签 标签

  • 电影

    这是一个不能说的秘密。

    121 引用 • 604 回帖
  • Bug

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

    76 引用 • 1737 回帖 • 1 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 34 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 4 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    691 引用 • 535 回帖
  • Jenkins

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

    53 引用 • 37 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2031 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 371 关注
  • 持续集成

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

    15 引用 • 7 回帖 • 1 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 251 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    544 引用 • 672 回帖
  • 房星科技

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

    6 引用 • 141 回帖 • 585 关注
  • 倾城之链
    23 引用 • 66 回帖 • 136 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 411 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 548 关注
  • NGINX

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

    313 引用 • 547 回帖
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 692 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 1 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 321 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖 • 6 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    177 引用 • 816 回帖
  • 旅游

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

    92 引用 • 899 回帖