Detecte preguntas y respuestas en texto enriquecido y agregue una clase utilizando JS.
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:
- para cada título h2 que termine con un signo de interrogación.
- agregar la clase .auto-question a h2.
- 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:
- para cada título h2 que termine con un signo de interrogación.
- agregar la clase .auto-question a h2.
- 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.>
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 suinnerText
. Aquí tienes una posible implementación: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(‘?’)){
}
}
“`
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.>