如何修复面包屑JSON-LD Schema生成器的功能异常问题

问题根因 #

• 第一处异常：全局listArray每次点击Click me都会追加新元素，没有清空重建；循环逻辑错误只取第一个列表项，且取值用了当前输入框内容而非已添加的列表项关联数据，还全局累加position导致数值错误。
• 第二处异常：生成Schema时没有和当前DOM中的列表项同步，而是依赖从未同步删除操作的全局listArray，删除DOM元素后数组仍保留旧数据。
• 隐藏bug：添加列表项时没有把对应的URL存储到li元素上，后续生成Schema时拿不到已添加项的URL。

修复后的完整JS代码 #

window.onload = function() {
    var button = document.getElementById("submitButton");
    button.onclick = addItem;
    // 提前创建ld+json标签，避免重复追加
    window.ldJsonEl = document.createElement('script');
    window.ldJsonEl.type = 'application/ld+json';
    var head = document.head || document.getElementsByTagName("head")[0];
    head.appendChild(window.ldJsonEl);
}

function addItem() {
    var textInput = document.getElementById("item");
    var urlInput = document.getElementById("url");
    var text = textInput.value.trim();
    var url = urlInput.value.trim();
    // 简单判空
    if (!text || !url) return;
    var ul = document.getElementById("ul");
    var li = document.createElement("li");
    li.className = "breadcrumb-item";
    // 把url存在元素的dataset里，后续生成schema用
    li.dataset.name = text;
    li.dataset.url = url;
    li.innerHTML = text;
    li.onclick = function() {
        this.parentNode.removeChild(this);
    }
    ul.appendChild(li);
    // 添加后清空输入框
    textInput.value = '';
    urlInput.value = '';
}

function myFunction() {
    var items = document.querySelectorAll('.breadcrumb-item');
    // 每次生成都新建数组，完全和当前DOM同步
    var listArray = [];
    for (var i = 0; i < items.length; i++) {
        var curLi = items[i];
        listArray.push({
            "@type": "ListItem",
            "position": i + 1,
            "name": curLi.dataset.name,
            "item": curLi.dataset.url
        });
    }
    var breadcrumbSchema = {
        "@context": "https://schema.org/",
        "@type": "BreadcrumbList",
        "itemListElement": listArray
    };
    var finalSchema = JSON.stringify(breadcrumbSchema, null, 2);
    // 更新ld+json内容
    window.ldJsonEl.textContent = finalSchema;
    // 更新页面显示
    document.querySelector('.output').innerHTML = finalSchema;
}

优化说明 #

• 新增输入框非空校验，添加完成后自动清空输入框，提升使用体验
• 生成Schema时每次都遍历当前页面存在的所有列表项，完全同步增删操作
• 用dataset存储每个列表项对应的URL，避免数据丢失
• 避免重复向页面注入script标签，仅更新已有标签的内容
• JSON格式化输出更易读

内容的提问来源于stack exchange，提问作者S Rahul