Compruebe si una cadena es html o no

Tengo una determinada cadena para la que quiero comprobar si es un html o no. Estoy usando expresiones regulares para lo mismo pero no obtengo el resultado adecuado.

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 falso en lugar de verdadero como resultado. ¿Qué me falta aquí?

Una expresión regular mejor 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á truepor cada cadena que se le pase, lo cual se debe a que cada cadena es HTML . En serio, incluso si tiene un formato deficiente 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 lo ayudará a analizar el HTML de ninguna manera, pero ciertamente marcará la cadena como que contiene elementos HTML.

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 parece a un HTML o no. Como puede ver, simplemente busca ELEMENT_NODE( nodeTypede 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 analizadas en innerHTML.

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

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

<sub>Notas:
1. Array.fromes el método ES2015, se puede reemplazar por [].slice.call(doc.body.childNodes).
2. La función de flecha en la somellamada se puede reemplazar con la función anónima habitual.</sub>

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 /etiquetas vacías XHTML terminadas 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 validarla como HTML.

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

Actualizar:

Validación completa 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 una validación adecuada ya que contiene TODAS las etiquetas HTML, primero las vacías y luego las demás que necesitan una etiqueta de cierre.

Demostración explicada aquí: http://regex101.com/r/pE1mT5

La respuesta de zzzzBov anterior es buena, pero no tiene en cuenta las etiquetas de cierre perdidas, como por ejemplo:

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

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

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

Aquí hay una frase descuidada que uso de vez en cuando:

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

Básicamente, regresará truepara cadenas que contengan un <seguido de ANYTHINGseguido de >.

Con ANYTHING, me refiero básicamente a cualquier cosa excepto a una cadena vacía.

No es genial, pero es una frase.

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.

Todas las respuestas aquí son demasiado inclusivas, solo buscan <seguido de >. No existe una forma perfecta de detectar si una cadena es HTML, pero puede hacerlo mejor.

A continuación, buscamos etiquetas finales y serán mucho más ajustadas y precisas:

import re
re_is_html = re.compile(r"(?:</[^<]+>)|(?:<[^<]+/>)")

Y aquí está en acción:

# Correctly identified as not HTML:
print re_is_html.search("Hello, World")
print re_is_html.search("This is less than <, this is greater than >.")
print re_is_html.search(" a < 3 && b > 3")
print re_is_html.search("<<Important Text>>")
print re_is_html.search("<a>")

# Correctly identified as HTML
print re_is_html.search("<a>Foo</a>")
print re_is_html.search("<input type='submit' value='Ok' />")
print re_is_html.search("<br/>")

# We don't handle, but could with more tweaking:
print re_is_html.search("<br>")
print re_is_html.search("Foo &amp; bar")
print re_is_html.search("<input type='submit' value='Ok'>")

Si está creando una expresión regular a partir de un literal de cadena, debe escapar de las barras invertidas:

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 debe escapar de las barras diagonales:

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

Además, su jsfiddle no funcionó porque asignó un onloadcontrolador dentro de otro onloadcontrolador; el valor predeterminado establecido en el panel Frameworks & Extensions a la izquierda es envolver el JS en un archivo 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/

Hasta donde yo sé, las expresiones regulares de JavaScript no tienen referencias inversas. Entonces esta parte de tu expresión:

</\1>

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

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

Con jQuery:

function isHTML(str) {
  return /^<.*?>$/.test(str) && !!$(str)[0];
}

Usando jQuery en este caso, la forma más simple sería:

if ($(testString).length > 0)

Si $(testString).length = 1, esto significa que hay una etiqueta HTML dentro textStging.

Existen soluciones sofisticadas que implican la utilización del navegador para intentar analizar el texto, identificando si se construyeron nodos DOM, lo que será… lento. O expresiones regulares que serán más rápidas, pero ... potencialmente inexactas. También hay dos preguntas muy distintas que surgen de este problema:

P1: ¿Una cadena contiene fragmentos HTML?

¿La cadena es parte de un documento HTML, que contiene marcas de elementos HTML o entidades codificadas? Esto se puede usar como un indicador de que la cadena puede requerir blanqueo / desinfección o decodificación de entidades:

/</?[a-z][^>]*>|(\&(?:[\w\d]+|#\d+|#x[a-f\d]+);/

Puede ver este patrón en uso en todos los ejemplos de todas las respuestas existentes en el momento de escribir este artículo, además de algunos ... bastante espantosos textos de muestra generados en WYSIWYG o Word y una variedad de referencias de entidades de caracteres.

P2: ¿La cadena es un documento HTML?

La especificación HTML es sorprendentemente flexible en cuanto a lo que considera un documento HTML . Los navegadores hacen todo lo posible para analizar casi cualquier texto basura como HTML. Dos enfoques: simplemente considere todo HTML (ya que si se entrega con un tipo de text/htmlcontenido, el usuario-agente hará un gran esfuerzo para tratar de interpretarlo como HTML) o busque el marcador de prefijo:

<!DOCTYPE html>

En términos de "buena formación", eso y casi nada más se "requiere". El siguiente es un documento HTML 100% completo y totalmente válido que contiene todos los elementos HTML que cree que se están omitiendo:

<!DOCTYPE html>
<title>Yes, really.</title>
<p>This is everything you need.

Sip. Hay reglas explícitas sobre cómo formar "faltantes" elementos tales como <html>, <head>, y <body>. Aunque me parece bastante divertido que el resaltado de sintaxis de SO no haya podido detectarlo correctamente sin una pista explícita.

Mi solucion es

const element = document.querySelector('.test_element');

const setHtml = elem =>{
    let getElemContent = elem.innerHTML;

    // Clean Up whitespace in the element
    // If you don't want to remove whitespace, then you can skip this line
    let newHtml = getElemContent.replace(/[\n\t ]+/g, " ");

    //RegEX to check HTML
    let checkHtml = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(getElemContent);

    //Check it is html or not
    if (checkHtml){
        console.log('This is an HTML');
        console.log(newHtml.trim());
    }
    else{
        console.log('This is a TEXT');
        console.log(elem.innerText.trim());
    }
}

setHtml(element);

Hay un paquete de NPM is-html que puede intentar resolver este https://github.com/sindresorhus/is-html