【js 代码分享】仿 anki 的顺序制卡

作用

根据对应的属性值显示挖空颜色。例如挖空是 c1，那新增一个属性 ankix，并且赋予值 c1。显示如图：

问题：
编辑界面还是显示红框，没办法去掉（能力有限）

代码

(function() {
    'use strict';

    // 创建一个 style 元素
    const style = document.createElement('style');
    style.type = 'text/css';

    // 定义 CSS 规则
    const css = `
       span[data-type="mark"].card__block--hidemark::before {
        content: " [...] ";
        font-weight: 500;
        color: #E72B2D;
      }
    `;

    // 将 CSS 规则添加到 style 元素
    style.appendChild(document.createTextNode(css));

    // 将 style 元素插入到 head 中
    document.head.appendChild(style);

    let attributeId = 'No attributeId found';

    function extractAttributeId() {
        const element = document.querySelector('.protyle-wysiwyg:nth-child(4)');
        if (element) {
            const innerHTML = element.innerHTML;
            const attributeIdMatch = innerHTML.match(/custom-ankix="([^"]+)"/);
            attributeId = attributeIdMatch ? attributeIdMatch[1] : 'No attributeId found';
            console.log('Attribute ID:', attributeId); // 打印 attributeId 的结果
            updateSpans(); // 每次提取后更新 spans
        } else {
            console.log('Element not found');
        }
    }

    function updateSpans() {
        // 选择所有需要检查的 span 元素
        const spans = document.querySelectorAll('span[data-type="mark"]');

        // 遍历所有这些元素
        spans.forEach(span => {
            // 检查文本内容是否包含 attributeId
            if (attributeId !== 'No attributeId found' && span.textContent.includes(attributeId)) {
                // 如果包含 attributeId，则添加类
                span.classList.add('card__block--hidemark');
            } else {
                // 如果不包含 attributeId，则移除类
                span.classList.remove('card__block--hidemark');
            }
        });
    }

    // 每 2 秒运行一次 extractAttributeId 函数
    setInterval(extractAttributeId, 2000);

    // 初次运行 extractAttributeId 以确保立即提取 attributeId
    extractAttributeId();
})();