Pregunta Compruebe si una cadena es html o no


Tengo una cierta cadena para la cual quiero verificar si es un html o no. Estoy usando regex para el mismo pero no obtengo el resultado correcto.

Validé mi expresión regular y funciona bien aquí.

var htmlRegex = new RegExp("<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)</\1>");
return htmlRegex.test(testString);

Aquí está el violín, pero la expresión regular no se está ejecutando allí. http://jsfiddle.net/wFWtc/

En mi máquina, el código funciona bien pero obtengo un resultado falso en lugar de verdadero. ¿Qué me falta aquí?


73
2018-03-17 08:23


origen


Respuestas:


Una mejor expresión regular para usar para verificar si una cadena es HTML es:

/^/

Por ejemplo:

/^/.test('') // true
/^/.test('foo bar baz') //true
/^/.test('<p>fizz buzz</p>') //true

De hecho, es tan bueno que regresará true para cada cadena pasada a él, que es porque cada cadena es HTML. En serio, incluso si está mal formateado o no es válido, sigue siendo HTML.

Si lo que está buscando es la presencia de elementos HTML, en lugar de simplemente cualquier contenido de texto, puede usar algo como:

/<[a-z][\s\S]*>/i.test()

No le ayudará a analizar el HTML de ninguna manera, pero ciertamente marcará la cadena como si tuviera elementos HTML.


208
2018-03-17 08:43



Método 1. Aquí está la función simple para probar si la cadena contiene datos HTML:

function isHTML(str) {
  var a = document.createElement('div');
  a.innerHTML = str;

  for (var c = a.childNodes, i = c.length; i--; ) {
    if (c[i].nodeType == 1) return true; 
  }

  return false;
}

La idea es permitir que el analizador DOM del navegador decida si la cadena proporcionada se ve como HTML o no. Como puede ver, simplemente verifica ELEMENT_NODE (nodeType de 1).

Hice un par de pruebas y parece que funciona:

isHTML('<a>this is a string</a>') // true
isHTML('this is a string')        // false
isHTML('this is a <b>string</b>') // true

Esta solución detectará correctamente la cadena HTML, sin embargo, tiene un efecto secundario que img / vide / etc. las etiquetas comenzarán a descargar el recurso una vez analizado en innerHTML.

Método n. ° 2. Otro método usa DOMParser y no tiene efectos secundarios de carga de recursos:

function isHTML(str) {
  var doc = new DOMParser().parseFromString(str, "text/html");
  return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
}

Notas:
1. Array.from es el método ES2015, puede ser reemplazado por [].slice.call(doc.body.childNodes).
2. Función de flecha en some la llamada puede reemplazarse con la función anónima habitual.


53
2018-03-17 08:40



Un poco de validación con:

/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i.test(htmlStringHere) 

Esto busca etiquetas vacías (algunas predefinidas) y / finalizó las etiquetas vacías XHTML y valida como HTML debido a la etiqueta vacía O capturará el nombre de la etiqueta e intentará encontrar su etiqueta de cierre en algún lugar de la cadena para validar como HTML.

Demostración explicada: http://regex101.com/r/cX0eP2

Actualizar:

Completar la validación con:

/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/i.test(htmlStringHere) 

Esto hace apropiado validación ya que contiene TODAS Etiquetas HTML, primero las vacías seguidas por el resto que necesitan una etiqueta de cierre.

Explicación de la demostración aquí: http://regex101.com/r/pE1mT5


11
2018-03-17 09:29



La respuesta de zzzzBov arriba es bueno, pero no tiene en cuenta las etiquetas de cierre diferido, como por ejemplo:

/<[a-z][\s\S]*>/i.test('foo </b> bar'); // false

Una versión que también atrapa las etiquetas de cierre podría ser esta:

/<[a-z/][\s\S]*>/i.test('foo </b> bar'); // true

6
2017-08-19 10:24



Si está creando una expresión regular a partir de un literal de cadena, debe evitar cualquier barra invertida:

var htmlRegex = new RegExp("<([A-Za-z][A-Za-z0-9]*)\\b[^>]*>(.*?)</\\1>");
// extra backslash added here ---------------------^ and here -----^

Esto no es necesario si usa un literal de expresión regular, pero luego necesita escabullirse hacia adelante:

var htmlRegex = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/;
// forward slash escaped here ------------------------^

También su jsfiddle no funcionó porque asignó un onload controlador dentro de otro onload controlador: el valor predeterminado, tal como se establece en el panel de Frameworks & Extensions de la izquierda, es ajustar el JS en un onload. Cambie eso a una opción nowrap y corrija el escape literal de la cadena y "funciona" (dentro de las restricciones que todos han señalado en los comentarios): http://jsfiddle.net/wFWtc/4/

Por lo que sé, las expresiones regulares de JavaScript no tienen referencias. Entonces esta parte de tu expresión:

</\1>

no funcionará en JS (pero funcionaría en algunos otros idiomas).


4
2018-03-17 08:31



/<\/?[^>]*>/.test(str) Solo detectar si contiene etiquetas html, puede ser un xml


4
2018-02-05 04:09



Aquí hay un trazador de líneas descuidado que uso de vez en cuando:

var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i);

Básicamente regresará true para cadenas que contienen una < seguido por ANYTHING seguido por >.

Por ANYTHING, Quiero decir básicamente todo menos una cadena vacía.

No es genial, pero es de una sola línea.

Uso

isHTML('Testing');               // false
isHTML('<p>Testing</p>');        // true
isHTML('<img src="hello.jpg">'); // true
isHTML('My < weird > string');   // true (caution!!!)
isHTML('<>');                    // false

Como puede ver, está lejos de ser perfecto, pero podría hacer el trabajo por usted en algunos casos.


4
2018-04-21 14:50