登录 注册

有办法为首行的特定文字开头添加自定义属性吗

我做了一个自定义属性，我希望当开头检测到 tags::开头就自动添加我设置的那个自定义属性

c1b7f0e443aaeab4d56c8c199663a8f3.png

  • 思源笔记

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

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

    23520 引用 • 95362 回帖
  • Q&A

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

    8720 引用 • 39802 回帖 • 138 关注
赤峰 位置
500 悬赏
2 收藏
6 回帖
2
2
156 101 43 12

相关帖子

被采纳的回答
  • onemo •
    付费者

    css + js 试试

    [data-type="NodeParagraph"].custom {
    border: 1px solid #FFFFFF;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    margin: 0px 0px 20px 0px;
}

    function applyTagClass() {
    var paragraphs = document.querySelectorAll('[data-type="NodeParagraph"]');
    paragraphs.forEach(function(para) {
        var editableDiv = para.querySelector('[contenteditable="true"]');
        if (editableDiv && editableDiv.textContent.trim().startsWith('tags::')) {
            para.classList.add('custom');
        } else {
            para.classList.remove('custom');
        }
    });
}

document.addEventListener('DOMContentLoaded', applyTagClass);

var observer = new MutationObserver(applyTagClass);
observer.observe(document.body, { childList: true, subtree: true });
6 回帖
有办法为首行的特定文字开头添加自定义属性吗

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • YRJ0422 •
    付费者 作者

    recording.gif

    优化以后是这样的

    
// 定义一个函数，用于根据特定条件给段落添加或移除CSS类
function applyTagClass() {
    // 缓存查询结果，避免每次调用函数都进行查询
    var paragraphs = document.querySelectorAll('[data-type="NodeParagraph"]');
  
    paragraphs.forEach(function(para) {
        var editableDiv = para.querySelector('[contenteditable="true"]');
        if (editableDiv && editableDiv.textContent.trim().startsWith('tags::')) {
            para.classList.add('custom');
        } else {
            para.classList.remove('custom');
        }
    });
}

// 使用事件委托，只在document.body上设置一个事件监听器
document.body.addEventListener('DOMNodeInserted', applyTagClass, true);

// 创建一个MutationObserver对象，用于监听DOM的变化
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(node) {
            // 检查是否是段落节点或者其子节点
            if (node.nodeType === 1 && node.matches('[data-type="NodeParagraph"]')) {
                applyTagClass();
            }
        });
    });
});

// 配置MutationObserver选项，只监听子节点的添加
observer.observe(document.body, { childList: true, subtree: true });

// 当文档加载完成时，执行applyTagClass函数
document.addEventListener('DOMContentLoaded', applyTagClass);
    1 回复
  • 其他回帖
  • onemo •
    付费者

    css + js 试试

    [data-type="NodeParagraph"].custom {
    border: 1px solid #FFFFFF;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    margin: 0px 0px 20px 0px;
}

    function applyTagClass() {
    var paragraphs = document.querySelectorAll('[data-type="NodeParagraph"]');
    paragraphs.forEach(function(para) {
        var editableDiv = para.querySelector('[contenteditable="true"]');
        if (editableDiv && editableDiv.textContent.trim().startsWith('tags::')) {
            para.classList.add('custom');
        } else {
            para.classList.remove('custom');
        }
    });
}

document.addEventListener('DOMContentLoaded', applyTagClass);

var observer = new MutationObserver(applyTagClass);
observer.observe(document.body, { childList: true, subtree: true });
    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    看看优化之后是什么样的？

    1 回复
  • YRJ0422 •
    付费者 作者

    感谢大佬，我又把 js 丢到 ai 里面让他自动优化了一下

    1 回复
  • 查看全部回帖
YRJ0422
赤峰
回帖
77
 帖子
9
 积分
2327

近期热议

推荐标签 标签

  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 19 关注
  • 思源笔记

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

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

    23520 引用 • 95362 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    4 引用 • 16 回帖
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    170 引用 • 513 回帖
  • InfluxDB

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

    2 引用 • 79 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 487 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时，提供更无缝的用户体验。

    1 引用 • 2 回帖 • 56 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • 工具

    子曰：“工欲善其事，必先利其器。”

    288 引用 • 735 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 681 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 460 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 794 回帖
  • 分享

    有什么新发现就分享给大家吧！

    247 引用 • 1793 回帖
  • Mac

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

    166 引用 • 595 回帖 • 1 关注
  • 又拍云

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

    21 引用 • 37 回帖 • 557 关注
  • 持续集成

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

    15 引用 • 7 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 25 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 665 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    943 引用 • 1460 回帖 • 2 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 3 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    344 引用 • 723 回帖
  • Hadoop

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

    86 引用 • 122 回帖 • 626 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    26 引用 • 196 回帖 • 17 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 790 关注

最新标签