3

Quiero obtener el código entre las etiquetas form de una página web usando Google Apps Script, para lo cual estoy usando match con la expresión regular /<form(.*?)<\/form>/g

function test() {
  var html = UrlFetchApp.fetch('https://docs.google.com/forms/d/1awKpg_diniayS6360kNXrcgihk36azQ3DJEaZqXDY7A/viewform?embedded=true').getContentText();
  var form = html.match(/<form(.*?)<\/form>/g);
  Logger.log(form);
}

He intentado con sustituir el modificador g por otros modificadores como m y s pero el editor de Google Apps Script no los acepta.

¿Es posible usar estos modificadores? ¿Cómo?

0

3 respuestas 3

5
+100

El regex que estás usando no coincide con el form porque en .*?, el punto coincide con cualquier caracter menos los saltos de línea. En cuanto a tu pregunta, los modificadores /g y /m no tienen nada que ver con este comportamiento. /g hace que se devuelvan todas las coincidencias, y /m cambia el comportamiento de ^ y $ exclusivamente.

Muestro 2 métodos para obtener todos los forms de un HTML: la forma que considero correcta, y luego cómo se podría hacer con regex (no tan confiable, pero significativamente más eficiente y menos peligroso que usar [\s\S]* para el contendido de una etiqueta).



Método 1: Accediendo al DOM (la forma correcta de hacerlo)

Con XMLService podemos usar el DOM (Document Object Model), lo cual permite seleccionar todos los tags <form> presentes en el documento.

XMLService tiene el método .parse() para procesar un string llano estructurado como documento XML. Sin embargo, no es para nada permisivo. Sólo acepta XML válido y bien estructurado (algo que casi ninguna página web cumple). Y, para lograr procesarlo, podemos realizar un "truco". Una versión más antigua de XMLService, el servicio XML, es mucho más indulgente y acepta un HTML común, convirtiéndolo en XML válido. Así, una vez procesado, podemos pasarlo a XMLService. La mala noticia: XML está obsoleto y no se sabe cuánto tiempo seguirá disponible. Pero por el momento funciona.

Esta forma es segura y a prueba de fallos, ya que cualquier problema con el HTML, se detectaría luego de XML.parse(), evitando una salida de texto incorrecta.

function doGet() {
  // En vez de obtener el html con UrlFetchApp.fetch(), se usa esto a modo de ejemplo
  var html = '<html>'
           + '  <body>'
           + '    <p>Texto a borrar</p>'
           + '    <form>'
           + '      <input type="radio" name="sexo" value="masculino" checked="1"> Masculino<br>'
           + '      <input type="radio" name="sexo" value="femenino"> Femenino'
           + '    </form>'
           + '    <p>Esto no debe aparecer</p>'
           + '    <form>'
           + '      Segundo form <input type="button" value="Funciona">'
           + '    </form>'
           + '  </body>'
           + '</html>';
  
  // Se crea el documento
  var doc = Xml.parse(html, true);        //Xml.parse está obsoleto pero sigue funcionando y mejor que XmlService
  var body = doc.html.body.toXmlString(); //truco para que funcione XmlService (sino no acepta HTML que no cumple como XML)
  var atom = XmlService.getNoNamespace();
  doc = XmlService.parse(body);
  var root = doc.getRootElement();
  var i, resultado = '';
  
  // Se obtienen todos los forms
  var forms = getElementsByTagName(root, 'form');
  
  // Se unen en un string
  for(i in forms) resultado += XmlService.getRawFormat().format(forms[i]);
  
  // Envíar resultado como salida del script
  return HtmlService.createHtmlOutput(resultado);
}

function getElementsByTagName(element, tagName) {  
  // Fuente: https://sites.google.com/site/scriptsexamples/learn-by-example/parsing-html
  var data = [];
  var descendants = element.getDescendants();
  for(i in descendants) {
    var elt = descendants[i].asElement();     
    if( elt !=null && elt.getName()== tagName) data.push(elt);      
  }
  return data;
}

La clave de esto es que una vez convertido a XML, tenemos la ventaja de contar con funciones para movernos por/agregar/modificar partes específicas de cada elemento. Usamos el método getDescendants() para obtener todos los nodos, y getName() para ver si es un form.

Resultado:

<body><form> <input type="radio" name="sexo" value="masculino" checked="1"> Masculino<br> <input type="radio" name="sexo" value="femenino"> Femenino </form><form> Segundo form <input type="button" value="Funciona"> </form></body>


Método 2: Regex (puede fallar)

El siguiente regex coincide con el texto de un <form> de principio a fin.

/<\s*form\b[\s\S]*?<\s*\/\s*form\b[^>]*>/gi

demo en regex101.com

Descripción

  • <\s*form Coincide con < + 0 o más espacios + form
  • \b coincide si está en una posición que es un límite de palabra completa (así coincide con form y no con formosa).
  • [\s\S]*? coincide con cualquier caracter repetido 0 o más veces. Además, el último ? hace que la repetición se comporte sin avaricia, o sea que se repita la menor cantidad de veces posibles (esta sintaxis soluciona el problema de /.*?/s).
  • <\s*\/\s*form\b es el patrón para </form, que puede tener espacios alrededor de la barra y debe ser una palabra completa.
  • [^>]* consume todos los caracteres, cualquier caracter excepto >.
  • > coincide con el final del tag.
  • /gi Establece los modos: global, para que devuelva todos los resultados que encuentre; y sin diferenciar entre mayúsculas y minúsculas.

Código

function doGet() {
  // En vez de obtener el html con UrlFetchApp.fetch(), se usa esto a modo de ejemplo
  var html = '<html>'
           + '  <body>'
           + '    <p>Texto a borrar</p>'
           + '    <form>'
           + '      <input type="radio" name="sexo" value="masculino" checked="1"> Masculino<br>'
           + '      <input type="radio" name="sexo" value="femenino"> Femenino'
           + '    </form>'
           + '    <p>Esto no debe aparecer</p>'
           + '    <form>'
           + '      Segundo form <input type="button" value="Funciona">'
           + '    </form>'
           + '  </body>'
           + '</html>';
  
  var regex = /<\s*form\b[\s\S]*?<\s*\/\s*form\b[^>]*>/gi;
  
  // Se extraen todos los forms del html y se unen en un string
  var forms = html.match(regex);
  var resultado = forms.join('');
  return HtmlService.createHtmlOutput(resultado);
}

¿Cuándo podría fallar?

Hay mucha información en la web acerca de por qué no conviene usar regex para procesar HTML. A muy grandes rasgos, en cualquier estructura que ofusque las etiquetas <form> o que permita usarlas sin que sean evaluadas como tal. Sin in muy lejos, la expresión regular fallaría cuando hay un form dentro de un comentario:

<form>
  Formulario con comentarios
  <!-- Comentario con "</form>" dentro --!>
</form>

Y esto se puede arreglar fácilmente, pero después tendremos otro caso raro que lo haría fallar y se podría arreglar, y después otro, y otro, y así sucesivamente.

0
0

HTML no cumple las condiciones para ser un lenguaje regular, no es recomendable utilizar expresiones regulares para tratar este lenguaje.

Con JQuery lo puedes hacer de forma sencilla:

$('form').each(function(){
   var html = $( this ).html();
})

Asi seleccionas todos los Form de la página, los recorres y por cada uno recoges su html interno, si necesitas seleccionar uno específico puedes modificar el selector. Esta es una forma, puedes utilizar otros frameworks, pero las expresiones regulares no son recomendables.

NOTA: Que no sea un lenguaje regular no quiere decir que no funcionen ciertas expresiones regulares, sino que no cumple las condiciones para que todas ellas funcionen.

5
  • Bastante mejor :) ¿podrías mencionar un ejemplo y donde se puede consultar las condiciones completas?
    – Rubén
    Commented el 5 ago. 2016 a las 12:20
  • 2
    Puedo indicarte un sitio a donde echar un ojo [stackoverflow.com/questions/590747/… (está en inglés, en castellano hay pocas discusiones acerca de esto). Las condiciones completas las puedes encontrar facilmente en la web, pero tienen su complicación, es necesario aplicar lógica matemática. Porcierto no voy a poder contestar en un tiempo, pero seguro que mucha gente te puede ayudar, esta es una buena comunidad.
    – Mikel
    Commented el 5 ago. 2016 a las 12:29
  • 2
    @Mikel La pregunta es utilizando Google Apps Script. html es cargado como texto con UrlFetchApp.fetch(). Con $('form') se referencia al form de la página actual, no el de la página obtenida, ya que primero hay que llevarla a DOM, por lo que no funcionaría.
    – Mariano
    Commented el 5 ago. 2016 a las 14:37
  • @Mikel: Gracias por el enlace. Me resultó útil para saber más de las expresiones regulares. No he usado jQuery en Google Apps Script pero tengo entendido que si se puede usar del lado cliente usando HTMLService pero no estoy seguro si es posible hacerlo del lado del servidor, pero eso ya sería otra pregunta, creo.
    – Rubén
    Commented el 5 ago. 2016 a las 14:50
  • Si, en eso tiene razón, de forma bien explicada, @Mariano, disculpa el despiste.
    – Mikel
    Commented el 8 ago. 2016 a las 6:19
-1

De acuerdo a la respuesta #1 en Issue 2098: Multiline regular expression modifier not working hay problemas que impiden el uso de modificador m sin embargo se puede usar en su lugar algo como [\s\S].

El siguiente código si logra obtener correctamente el código entre las etiquetas form:

function doGet() {
  var html = UrlFetchApp.fetch('https://docs.google.com/forms/d/1awKpg_diniayS6360kNXrcgihk36azQ3DJEaZqXDY7A/viewform?embedded=true').getContentText();
  var output = html.match(/<form[\s\S]*form>/g);
  return HtmlService.createHtmlOutput(output);
}
0

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.