es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Detecte preguntas y respuestas en texto enriquecido y agregue una clase utilizando JS.

16 Jun, 2023 Programación

Me gustaría agregar automáticamente un esquema de preguntas frecuentes (FAQ) dependiendo del contenido de una div con el id #content en una página web.

No soy desarrollador, estoy construyendo en Webflow y aprendiendo a medida que necesito un script.

Hasta ahora, esto es lo que tengo:

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);

funciona, pero ahora mi problema es que quiero agregar la clase .auto-question y .auto-answer automáticamente.

este es un ejemplo de la página en la que estoy trabajando: crédit d’impôt recherche.

mi idea es el siguiente proceso:

  1. para cada título h2 que termine con un signo de interrogación.
  2. agregar la clase .auto-question a h2.
  3. agregar la clase .auto-answer a innertext hasta el siguiente h2 o hasta el final de #content si no hay alguno.

nuevamente, no soy desarrollador, está bien unir pedazos de código, pero escribir el mío está fuera de mi alcance.

espero que puedas ayudarme,
muchas gracias. 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);=”” funciona,=”” pero=”” ahora=”” mi=”” problema=”” es=”” que=”” quiero=”” agregar=”” la=”” clase=”” .auto-question=”” y=”” .auto-answer=”” automáticamente.=”” este=”” es=”” un=”” ejemplo=”” de=”” la=”” página=”” en=”” la=”” que=”” estoy=”” trabajando:=”” crédit=”” d’impôt=”” recherche.=”” mi=”” idea=”” es=”” el=”” siguiente=”” proceso:=”” 1.=”” para=”” cada=”” título=”” h2=”” que=”” termine=”” con=”” un=”” signo=”” de=”” interrogación.=”” 2.=”” agregar=”” la=”” clase=”” .auto-question=”” a=”” h2.=”” 3.=”” agregar=”” la=”” clase=”” .auto-answer=”” a=”” innertext=”” hasta=”” el=”” siguiente=”” h2=”” o=”” hasta=”” el=”” final=”” de=”” #content=”” si=”” no=”” hay=”” alguno.=”” nuevamente,=”” no=”” soy=”” desarrollador,=”” está=”” bien=”” unir=”” pedazos=”” de=”” código,=”” pero=”” escribir=”” el=”” mío=”” está=”” fuera=”” de=”” mi=”” alcance.=”” espero=”” que=”” puedas=”” ayudarme,=”” muchas=””></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);

funciona, pero ahora mi problema es que quiero agregar la clase .auto-question y .auto-answer automáticamente.

este es un ejemplo de la página en la que estoy trabajando: crédit d’impôt recherche.

mi idea es el siguiente proceso:

  1. para cada título h2 que termine con un signo de interrogación.
  2. agregar la clase .auto-question a h2.
  3. agregar la clase .auto-answer a innertext hasta el siguiente h2 o hasta el final de #content si no hay alguno.

nuevamente, no soy desarrollador, está bien unir pedazos de código, pero escribir el mío está fuera de mi alcance.

espero que puedas ayudarme,
muchas gracias.>

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para conseguir el resultado deseado, puedes utilizar JavaScript para iterar sobre todos los elementos H2 y comprobar si terminan con un signo de interrogación. Si es así, añade la clase .auto-question al mismo y también encuentra el siguiente elemento que no sea un H2 o que sea el final del div #content y añade la clase .auto-answer a su innerText. Aquí tienes una posible implementación:

    const contentDiv=document.getElementById('content');
const headings=contentDiv.querySelectorAll('h2');
for(let i=0;i<headings.length;i++){
  const heading=headings[i];

  // comprueba si el encabezado termina con un signo de interrogación
  if(heading.textcontent.trim().endswith('?')){

    // añade la clase ".auto-question" al encabezado
    heading.classlist.add('auto-question');

    // encuentra el siguiente elemento que no sea un h2
    let nextelem=heading.nextelementsibling;
    while(nextelem&&nextelem.tagname==='h2'){
      nextelem=nextelem.nextelementsibling;
    }

    // si se encontró un elemento que no sea h2, añade la clase ".auto-answer" a su innertext
    if(nextelem){
      nextelem.classlist.add('auto-answer');
    }
  }
}

    puedes añadir este código a la página utilizando una etiqueta de script, ya sea en la sección de cabecera o de cuerpo. ten en cuenta que este código añade las clases dinámicamente al cargar la página, así que si el contenido de la página cambia después (por ejemplo, se añaden nuevas preguntas o respuestas), las clases podrían no añadirse a ellas. const=”” heading=”headings[i];” comprueba=”” si=”” el=”” encabezado=”” termina=”” con=”” un=”” signo=”” de=”” interrogación=”” if(heading.textcontent.trim().endswith(‘?’)){=”” añade=”” la=”” clase=”” “.auto-question”=”” al=”” encabezado=”” heading.classlist.add(‘auto-question’);=”” encuentra=”” el=”” siguiente=”” elemento=”” que=”” no=”” sea=”” un=”” h2=”” let=”” nextelem=”heading.nextElementSibling;” while(nextelem&&nextelem.tagname=”==’H2′){” nextelem=”nextElem.nextElementSibling;” }=”” si=”” se=”” encontró=”” un=”” elemento=”” que=”” no=”” sea=”” h2,=”” añade=”” la=”” clase=”” “.auto-answer”=”” a=”” su=”” innertext=”” if(nextelem){=”” nextelem.classlist.add(‘auto-answer’);=”” }=”” }=”” }=”” “`=”” puedes=”” añadir=”” este=”” código=”” a=”” la=”” página=”” utilizando=”” una=”” etiqueta=”” de=”” script,=”” ya=”” sea=”” en=”” la=”” sección=”” de=”” cabecera=”” o=”” de=”” cuerpo.=”” ten=”” en=”” cuenta=”” que=”” este=”” código=”” añade=”” las=”” clases=”” dinámicamente=”” al=”” cargar=”” la=”” página,=”” así=”” que=”” si=”” el=”” contenido=”” de=”” la=”” página=”” cambia=”” después=”” (por=”” ejemplo,=”” se=”” añaden=”” nuevas=”” preguntas=”” o=”” respuestas),=”” las=”” clases=”” podrían=”” no=”” añadirse=”” a=””></headings.length;i++){
    const heading=headings[i];

    // comprueba si el encabezado termina con un signo de interrogación
    if(heading.textcontent.trim().endswith(‘?’)){

    // añade la clase ".auto-question" al encabezado
heading.classlist.add('auto-question');

// encuentra el siguiente elemento que no sea un h2
let nextelem=heading.nextelementsibling;
while(nextelem&&nextelem.tagname==='h2'){
  nextelem=nextelem.nextelementsibling;
}

// si se encontró un elemento que no sea h2, añade la clase ".auto-answer" a su innertext
if(nextelem){
  nextelem.classlist.add('auto-answer');
}

    }
    }
    “`

    puedes añadir este código a la página utilizando una etiqueta de script, ya sea en la sección de cabecera o de cuerpo. ten en cuenta que este código añade las clases dinámicamente al cargar la página, así que si el contenido de la página cambia después (por ejemplo, se añaden nuevas preguntas o respuestas), las clases podrían no añadirse a ellas.>

Comments are closed.