Skip to main content
1 de 6
Mariano
  • 24.5k
  • 20
  • 76
  • 105

El regex que estás usando no coincide con el form porque estás usando .*?, y 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).



##Usando DOM (la forma correcta de hacerlo)

Usando XMLService llevamos el HTML a DOM, lo cual permite seleccionar todos los tags <form> presentes en el documento. Esta forma es segura y a prueba de fallos, ya que cualquier problema con el HTML, se detectaría en .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 tener 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>


##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.
  • <\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 después otro, y otro, y así sucesivamente.

Mariano
  • 24.5k
  • 20
  • 76
  • 105