2

Necesito añadir un script a tinymce 4 para que cree un marcado de FAQs de google a partir del contenido del textarea.

Para ello, necesito que saque por un lado los elementos h2, que serían el título de la pregunta, y por otro lado, los p que hay entre cada h2, que serían las respuestas.

El textarea contendría html tipo así:

<h2> titulo de pregunta 1</h2>
<p>uno o más p con respuesta a la pregunta 1</p>
<h2> titulo de pregunta 2</h2>
<p>uno o más p con respuesta a la pregunta 2</p>

Este es el script de ejemplo que debería escribir:

<script defer="defer" type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "titulo de pregunta 1",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "<p>uno o más p con respuesta a la pregunta 1</p>"
        }
      },  {
        "@type": "Question",
        "name": "titulo de pregunta 2",
        "acceptedAnswer": {
          "@type": "Answer",
          "text":"<p>uno o más p con respuesta a la pregunta 2</p>"}
        }]
    }
    </script> 

Actualmente tengo un textarea con un botón que saca los h2 y los p, pero tengo varios problemas. Por un lado, el h2 (el título de la pregunta), debería sacar solo el texto, no el código html.

Por otro lado, debería poder recorrer el array para generar el script con el foreach, sin embargo me da problemas, ya que o pinta todos o da null.

Este es el código:

           ed.addButton('marcadogoogle', {
               title : 'Script para marcado google',
               image : '/fotos2.gif',
               onclick : function() {
           
            //sacamos el valor que hay dentro del textarea
             var htmlAsText= $("textarea").val();
            const wrapper = document.createElement('div')
            wrapper.innerHTML = htmlAsText
            const h2 = $('h2', wrapper)
            
            const h2maspes = []
            h2.each((i, h2) => {
              const id = h2.id
              const pes = []
              let element = $(h2).next()
              while(element.length) {
                if (element[0].tagName === 'H2') {
                  break
                }
                if (element[0].tagName !== 'P') {
                  element = element.next()
                  continue
                }
                pes.push(element[0].outerHTML)
                element = element.next()
              }
              h2maspes.push([h2.outerHTML, pes.join('')])
            })

        
    h2maspes.forEach(function(elemento, indice, array) {
console.log(elemento, indice)});
0

2 respuestas 2

1

Ya que es un textarea, sería mucho mejor trabajar con expresiones regulares a crear un elemento más y sobrecargar el DOM

Para ello, podemos apoyarnos de la siguiente expresión

/(\<h2(?:(?!<h2)[\s\S])*?[\s\S]*?<\/h2>)|(\<p(?:(?!<p)[\s\S])*?[\s\S]*?<\/p>)/gi

Los que nos daría matches de todos los strings así:

<h2>....</h2>
<p>...</p>

Entonces, teniendo esto, ya podemos procesar el valor

$(".process").on("click", () => {
  const text = $("textarea").val();
  const matches = text.match(/(\<h2(?:(?!<h2)[\s\S])*?[\s\S]*?<\/h2>)|(\<p(?:(?!<p)[\s\S])*?[\s\S]*?<\/p>)/gi);
  if (matches) {
    console.log(matches.join("\n"));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>
<button class="process">Process</button>

Después de obtener todos los matches, simplemente podríamos recorrer cada uno, haciendo push a mainEntity

$(".process").on("click", () => {
  const text = $("textarea").val();
  const matches = text.match(/(\<h2(?:(?!<h2)[\s\S])*?[\s\S]*?<\/h2>)|(\<p(?:(?!<p)[\s\S])*?[\s\S]*?<\/p>)/gi);
  const result = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": []
  };
  if (matches) {
    matches.forEach((match,i) => {
      if (match.charAt(1) === "h") {
        const title = (match.replace(match.match(/\<[a-zA-Z-0-9]{1,}\s*(\S+="[^"]*"\s*)+\>|\<\s*[a-zA-Z-0-9]{1,}\s*\>/g), "").replace(/\<\s*\/[a-zA-Z-0-9]{1,}\s*\>$/, "")).trim();
        result["mainEntity"]["push"]({"@type":"Question","name":title,"acceptedAnswer":{"@type":"Answer","text":matches[i+ 1]}});
      }
    });
  }
  console.log(result)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>
<button class="process">Process</button>

Debido a que los elementos <h2> podrían tener atributos, vamos a usar una expresión regular en el match, que lo que hace es reemplazar <h2> e incluso atributos con valor y sin valor, de manera que solo tengamos el texto

2
  • cómo puedo hacer para que si hay más de 1 p, coja todos y no solo el primero de cada respuesta? Es posible hacer con expresiones regulares que en los h2 saque solo el texto? , es decir lo que hay entre el ">" y el "</" del h2. Ya que algunos pueden tener id class y no puedo contar carácteres a restar
    – Wompygs
    el 9 mar. 2021 a las 21:02
  • Gracias @Anythingg. Así filtra los p y los h2 perfectamente. Noto un problema, y es que nada más detecta el primer p de cada h2, por lo que las preguntas que tienen más de un p las muestra incompletas. Para solucionarlo no sé muy bien como hacer, una opción podría ser poner todos los p hasta el siguiente h2, pero el último no tiene un h2 al final que lo corte. Se te ocurre algo?
    – Wompygs
    el 9 mar. 2021 a las 23:53
1

Tu aproximación estaba bien encaminada, solo necesitabas crear primero las preguntas, para ir acumulando respuestas y, al final, generar el objeto deseado.

Crea un arreglo de preguntas, que va a contener objetos con el título y la respuesta en uno o varios párrafos. Al generar el objeto, puedes omitir las preguntas que no tengan respuesta.

$('#boton').on("click", () => {
    // Crear objeto
    const schema = {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": []
    };

    // Obtener contenido
    const text = $('#contenido').val();
    // Crear arreglo vacío de preguntas
    const preguntas = [];
    // Pregunta activa, servirá para agregar respuestas
    let index = -1;
    // Crear un elemento HTML con contenido de textarea para poder recorrer etiquetas
    const wrapper = document.createElement('div');
    wrapper.innerHTML = text;
    // Recorrer todas las etiquetas
    wrapper.querySelectorAll('*').forEach(item => {
        // Si la etiqueta es h2
        if(item.tagName == 'H2') {
            // Incrementar contador de preguntas
            index ++;
            // Crear pregunta con título y arreglo de respuestas vacías
            preguntas.push({
                titulo: item.textContent,
                respuestas: []
            });
        // Solo si hay una pregunta y la etiqueta es p
        } else if(index >= 0 && item.tagName == 'P') {
            // Agregar respuesta a pregunta actual, incluyendo etiqueta de párrafo
            preguntas[index].respuestas.push(item.outerHTML);
        }
    });
    // Recorrer preguntas para agregar a objeto
    preguntas.forEach(pregunta => {
        // Solo si hay respuestas
        if(pregunta.respuestas.length > 0) {
            // Agregar objeto de pregunta
            schema.mainEntity.push({
                "@type": "Question",
                "name": pregunta.titulo,
                "acceptedAnswer": {
                    "@type": "Answer",
                    // Unir todas las respuestas en una sola cadena
                    "text": pregunta.respuestas.join('')
                }
            });
        }
    });
    console.log(schema);
});
#contenido {
    width: 400px;
    height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="contenido">
<h2>Título de pregunta 1</h2>
<p>uno o más p con respuesta a la pregunta 1</p>
<p>uno o más p con respuesta a la pregunta 1</p>
<h2>Título de pregunta 2</h2>
<p>uno o más p con respuesta a la pregunta 2</p>
<h2>No tiene respuesta, no se va a agregar al objeto</h2>
<h2>Título de pregunta 3</h2>
<p>uno o más p con respuesta a la pregunta 3</p>
<p>uno o más p con respuesta a la pregunta 3</p>
</textarea><br>
<button id="boton">Generar</button>

Nota: Para este caso, me pareció mucho más fácil y óptimo crear elementos y recorrerlos con Javascript puro en lugar de usar los métodos de jQuery

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.