检测富文本中的问题和答案并使用JS添加类

Question

我想根据网页中ID为#content的div的内容自动添加FAQ schema。

我不是开发人员，我正在构建 webflow 并在需要脚本时随时随地学习。

到目前为止，这是我得到的：

var questions = document.getElementsByClassName("auto-question");
var answer = document.getElementsByClassName("auto-answer");
var schema ={
    "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": []
}
for (var i = 0; i<questions.length; i++){
    var new_schema =
    {
    "@type": "Question",
    "name": questions[i].innerText,
    "acceptedAnswer": {
      "@type": "Answer",
      "text": answer[i].innerText
    }
  }
  
  schema.mainEntity.push(new_schema);
}
var script = document.createElement('script');
script.type = "application/ld+json";
script.text = JSON.stringify(schema);
document.querySelector('body').appendChild(script);

它有效，但现在我的问题是我想自动添加类 .auto-question 和 .auto-answer。

这是我正在尝试处理的页面示例：crédit impôt recherche。

我的想法是以下流程：

1. 对于每个以问号结尾的 H2 标题
2. 将类 .auto-question 添加到 H2
3. 将类 .auto-answer 添加到 innerText 直到下一个 H2 或直到 #content 如果没有结束

再次重申，我不是开发人员，将一些代码放在一起没问题，但我自己的代码是不适合的。

希望你能帮忙， 非常感谢

Answer 1

总体而言，您的方法很好，但我认为在这种情况下不合适。它不会那样工作，因为它不适合给定的 HTML 结构，它需要适应那个结构。

由于所有元素都是同级元素，一种方法是获取 FAQ 容器中的所有元素，然后循环遍历每个元素，并使用 H2 标签作为构建问题模式的指标。添加额外的类将毫无意义，因为您需要为每个元素添加类...

因此，在读取 H2 标记后，构建一个模式，将其推送到常见问题解答，直到完成。

这是代码，用这个替换你的常见问题代码：

window.addEventListener('DOMContentLoaded', () => {

    // setup selectors
    const snippetsContainer = '.w-richtext';
    const questionIndicatorTag = 'H2';

    // get the faq container and all nodes
    const faqHTML = Array.from(document.querySelector(snippetsContainer).children);

    const schemaFAQ = {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": []
    };


    // data variables to store while looping
    let questionName = answerText = '';

    // loop each element, h2 is a question indicator, other nodes are its answer
    faqHTML.forEach((el, i) => {

        // check question tag indicator
        if (el.tagName === questionIndicatorTag) {

            // new question, add previous question to the faqs, reset
            // check if index indicates it's not the first question
            if (i > 0) {
                // add to the FAQ
                schemaFAQ.mainEntity.push({
                    "@type": "Question",
                    "name": questionName,
                    "acceptedAnswer": {
                        "@type": "Answer",
                        "text": answerText
                    }
                });
                // reset data
                questionName = answerText = ''
            }
            // new question
            questionName = el.innerText;
        } else {
            // add answer
            answerText += el.innerText + '<br>';
        }
        // all done
        if (i + 1 === faqHTML.length) {
            schemaFAQ.mainEntity.push({
                "@type": "Question",
                "name": questionName,
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": answerText
                }
            });
        }
    });

    // insert
    const scriptFAQ = document.createElement('script');
    scriptFAQ.type = "application/ld+json";
    scriptFAQ.text = JSON.stringify(schemaFAQ);
    document.getElementsByTagName('head')[0].appendChild(scriptFAQ);

});