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

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

右侧去掉,参考刚才帖子 请问标签搜索界面如何通过 css 隐藏重复显示? - wilsons 的回帖
左侧不建议去掉,因为这是搜索关键词,当某行只有一个标签内容时,如果把关键词去掉就空白了。
如图,
当然,如果第一种情况关键词标签去掉,第二种不去掉,也挺奇怪的,会导致同样的功能不一致,非常不建议这样做。
右侧去掉,参考刚才帖子 请问标签搜索界面如何通过 css 隐藏重复显示? - wilsons 的回帖
左侧不建议去掉,因为这是搜索关键词,当某行只有一个标签内容时,如果把关键词去掉就空白了。
如图,
当然,如果第一种情况关键词标签去掉,第二种不去掉,也挺奇怪的,会导致同样的功能不一致,非常不建议这样做。
在 请问标签搜索界面如何通过 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);
}
})();
webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。
Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。
HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。
WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。
SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。
昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。
Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。
Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。
Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。
App(应用程序,Application 的缩写)一般指手机软件。
MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。
区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。
SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。
Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。
小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。
由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!
BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。
笔记整理交给我,一心只读圣贤书。
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。
“梦想从学习开始,事业从实践起步” —— 习近平
程序员是从事程序开发、程序维护的专业人员。
WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。