Verifique se uma string é html ou não

Eu tenho uma determinada string para a qual quero verificar se é um html ou não. Estou usando regex para o mesmo, mas não obtive o resultado adequado.

Eu validei meu regex e ele funciona bem aqui .

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

Aqui está o violino, mas o regex não está sendo executado lá. http://jsfiddle.net/wFWtc/

Na minha máquina, o código funciona bem, mas obtenho um falso em vez de verdadeiro como resultado. O que estou faltando aqui?

A melhor regex a ser usada para verificar se uma string é HTML é:

/^/

Por exemplo:

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

Na verdade, é tão bom que retornará truepara cada string passada para ele, porque cada string é HTML . Sério, mesmo que seja mal formatado ou inválido, ainda é HTML.

Se o que você está procurando é a presença de elementos HTML, em vez de simplesmente qualquer conteúdo de texto, você pode usar algo como:

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

Não ajudará você a analisar o HTML de nenhuma forma, mas certamente sinalizará a string como contendo elementos HTML.

Método # 1 . Esta é a função simples para testar se a string contém dados 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;
}

A ideia é permitir que o analisador DOM do navegador decida se a string fornecida se parece com um HTML ou não. Como você pode ver, ele simplesmente verifica ELEMENT_NODE( nodeTypede 1).

Fiz alguns testes e 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 solução detectará corretamente a string HTML, no entanto, tem o efeito colateral de img / vide / etc. as tags começarão a baixar o recurso depois de analisadas no innerHTML.

Método # 2 . Outro método usa DOMParser e não tem efeitos colaterais de recursos de carregamento:

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.fromé o método ES2015, pode ser substituído por [].slice.call(doc.body.childNodes).
2. A função de seta na somechamada pode ser substituída pela função anônima usual.</sub>

Um pouco de validação com:

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

Isso procura por tags vazias (algumas predefinidas) e /tags vazias XHTML encerradas e valida como HTML por causa da tag vazia OU irá capturar o nome da tag e tentar encontrar sua tag de fechamento em algum lugar na string para validar como HTML.

Demonstração explicada: http://regex101.com/r/cX0eP2

Atualizar:

Validação completa com:

/<(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) 

Isso faz a validação adequada , pois contém TODAS as tags HTML, as vazias primeiro, seguidas das demais que precisam de uma tag de fechamento.

Demonstração explicada aqui: http://regex101.com/r/pE1mT5

A resposta do zzzzBov acima é boa, mas não leva em conta as tags de fechamento perdidas, como por exemplo:

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

Uma versão que também captura as tags de fechamento pode ser esta:

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

Aqui está uma linha simples que uso de vez em quando:

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

Basicamente, ele retornará truepara strings contendo a <seguido de ANYTHINGseguido de >.

Por ANYTHING, quero dizer basicamente qualquer coisa, exceto uma string vazia.

Não é ótimo, mas é uma linha única.

Uso

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

Como você pode ver, está longe de ser perfeito, mas pode fazer o trabalho para você em alguns casos.

Todas as respostas aqui são excessivamente inclusivas, elas apenas procuram <seguido por >. Não existe uma maneira perfeita de detectar se uma string é HTML, mas você pode fazer melhor.

Abaixo, procuramos as tags finais e serão muito mais rígidas e precisas:

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

E aqui está ele em ação:

# 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'>")

Se você estiver criando uma regex a partir de um literal de string, será necessário escapar de qualquer barra invertida:

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

Isso não é necessário se você usar um literal regex, mas precisa escapar das barras:

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

Além disso, seu jsfiddle não funcionou porque você atribuiu um onloadmanipulador dentro de outro onloadmanipulador - o padrão, conforme definido no painel Frameworks e Extensões à esquerda é envolver o JS em um onload. Mude isso para uma opção nowrap e corrija o escape literal da string e isso "funciona" (dentro das restrições que todos apontaram nos comentários): http://jsfiddle.net/wFWtc/4/

Pelo que eu sei, as expressões regulares do JavaScript não têm referências anteriores. Portanto, esta parte da sua expressão:

</\1>

não funcionará em JS (mas funcionará em algumas outras linguagens).

/<\/?[^>]*>/.test(str) Detecte apenas se ele contém tags html, pode ser um xml

Com jQuery:

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

Usando jQuery neste caso, a forma mais simples seria:

if ($(testString).length > 0)

Se $(testString).length = 1, isso significa que há uma tag HTML dentro textStging.

Existem soluções sofisticadas que envolvem a utilização do próprio navegador para tentar analisar o texto, identificando se algum nó DOM foi construído, o que será ... lento. Ou expressões regulares que serão mais rápidas, mas ... potencialmente imprecisas. Existem também duas questões muito distintas decorrentes deste problema:

Q1: uma string contém fragmentos HTML?

A string é parte de um documento HTML, contendo marcação de elemento HTML ou entidades codificadas? Isso pode ser usado como um indicador de que a string pode exigir branqueamento / higienização ou decodificação de entidade:

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

Você pode ver esse padrão em uso em todos os exemplos de todas as respostas existentes no momento em que este livro foi escrito, além de alguns ... hediondos textos de amostra gerados por WYSIWYG ou Word e uma variedade de referências a entidades de caracteres.

P2: A string é um documento HTML?

A especificação HTML é chocantemente frouxa quanto ao que considera um documento HTML . Os navegadores vão a extremos para analisar quase qualquer texto lixo como HTML. Duas abordagens: ou apenas considerar tudo HTML (já que se entregue com um text/htmlContent-Type, grande esforço será despendido para tentar interpretá-lo como HTML pelo agente do usuário) ou procurar o marcador de prefixo:

<!DOCTYPE html>

Em termos de "boa formação", isso e quase nada mais é "necessário". A seguir está um documento HTML 100% completo e totalmente válido, contendo todos os elementos HTML que você acha que estão sendo omitidos:

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

Sim. Existem regras explícitas sobre como formar elementos "perdidos", como <html>, <head>, e <body>. Embora eu ache bastante divertido que o realce de sintaxe do SO não tenha detectado isso corretamente sem uma dica explícita.

Minha solução é

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);

Existe um pacote NPM is-html que pode tentar resolver este https://github.com/sindresorhus/is-html