Controlla se una stringa è html o meno

Ho una certa stringa per la quale voglio controllare se è un html o meno. Sto usando regex per lo stesso ma non ottengo il risultato corretto.

Ho convalidato il mio regex e funziona benissimo qui .

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

Ecco il violino ma la regex non è in esecuzione lì. http://jsfiddle.net/wFWtc/

Sulla mia macchina, il codice funziona correttamente, ma come risultato ottengo un falso anziché vero. Cosa manca qui?

Una regex migliore da utilizzare per verificare se una stringa è HTML è:

/^/

Per esempio:

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

In effetti, è così buono che tornerà trueper ogni stringa passata, perché ogni stringa è HTML . Seriamente, anche se è mal formattato o non valido, è comunque HTML.

Se quello che stai cercando è la presenza di elementi HTML, piuttosto che semplicemente qualsiasi contenuto di testo, potresti usare qualcosa del tipo:

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

Non ti aiuterà in alcun modo ad analizzare l'HTML, ma sicuramente contrassegnerà la stringa come contenente elementi HTML.

Metodo n . 1 . Ecco la semplice funzione per verificare se la stringa contiene dati 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;
}

L'idea è di consentire al parser DOM del browser di decidere se la stringa fornita assomiglia a un HTML o meno. Come puoi vedere, controlla semplicemente ELEMENT_NODE( nodeTypedi 1).

Ho fatto un paio di test e sembra che funzioni:

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

Questa soluzione rileverà correttamente la stringa HTML, tuttavia ha un effetto collaterale che img / vide / ecc. i tag inizieranno a scaricare la risorsa una volta analizzati in innerHTML.

Metodo n . 2 . Un altro metodo utilizza DOMParser e non ha effetti collaterali di caricamento delle risorse:

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

<sub>Note:
1. Array.fromè il metodo ES2015, può essere sostituito con [].slice.call(doc.body.childNodes).
2. La funzione freccia in somechiamata può essere sostituita con la normale funzione anonima.</sub>

Un po 'di convalida con:

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

Questo cerca tag vuoti (alcuni predefiniti) e /tag vuoti XHTML terminati e convalida come HTML a causa del tag vuoto OPPURE acquisirà il nome del tag e tenterà di trovare il tag di chiusura da qualche parte nella stringa per convalidare come HTML.

Demo spiegato: http://regex101.com/r/cX0eP2

Aggiornare:

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

Ciò esegue una corretta convalida poiché contiene TUTTO i tag HTML, prima quelli vuoti seguiti dagli altri che richiedono un tag di chiusura.

Demo spiegato qui: http://regex101.com/r/pE1mT5

La risposta di zzzzBov sopra è buona, ma non tiene conto dei tag di chiusura vaganti, come ad esempio:

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

Una versione che cattura anche i tag di chiusura potrebbe essere questa:

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

Ecco una battuta sciatta che uso di tanto in tanto:

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

Fondamentalmente restituirà trueper le stringhe contenenti un <seguito da ANYTHINGseguito da >.

Con ANYTHING, intendo praticamente qualsiasi cosa tranne una stringa vuota.

Non è eccezionale, ma è una battuta.

Utilizzo

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

Come puoi vedere è tutt'altro che perfetto, ma in alcuni casi potrebbe fare il lavoro per te.

Tutte le risposte qui sono troppo inclusive, cercano solo <seguite da> . Non esiste un modo perfetto per rilevare se una stringa è HTML, ma puoi fare di meglio.

Di seguito cerchiamo le etichette finali e saranno molto più strette e accurate:

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

Ed eccolo in azione:

# 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 stai creando una regex da una stringa letterale, devi eseguire l'escape di eventuali backslash:

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

Questo non è necessario se usi un'espressione regolare letterale, ma poi devi sfuggire alle barre in avanti:

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

Inoltre, il tuo jsfiddle non ha funzionato perché hai assegnato un onloadgestore all'interno di un altro onloadgestore: l'impostazione predefinita nel pannello Frameworks & Extensions a sinistra è avvolgere il JS in un file onload. Cambialo in un'opzione nowrap e correggi l'escape letterale della stringa e "funziona" (entro i limiti indicati da tutti nei commenti): http://jsfiddle.net/wFWtc/4/

Per quanto ne so, le espressioni regolari JavaScript non hanno riferimenti a ritroso. Quindi questa parte della tua espressione:

</\1>

non funzionerà in JS (ma funzionerà in alcune altre lingue).

/<\/?[^>]*>/.test(str) Rileva solo se contiene tag html, può essere un xml

Con jQuery:

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

Usando jQuery in questo caso, la forma più semplice sarebbe:

if ($(testString).length > 0)

Se $(testString).length = 1, significa che c'è un tag HTML all'interno textStging.

Esistono soluzioni fantasiose che implicano l'utilizzo del browser stesso per tentare di analizzare il testo, identificando se sono stati costruiti nodi DOM, il che sarà ... lento. O espressioni regolari che saranno più veloci, ma ... potenzialmente imprecise. Ci sono anche due domande molto distinte che sorgono da questo problema:

Q1: una stringa contiene frammenti HTML?

La stringa fa parte di un documento HTML, contenente markup di elementi HTML o entità codificate? Questo può essere utilizzato come indicatore del fatto che la stringa potrebbe richiedere sbiancamento / sanificazione o decodifica di entità:

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

Puoi vedere questo modello in uso rispetto a tutti gli esempi da tutte le risposte esistenti al momento della stesura di questo articolo, oltre ad alcuni ... un testo campione generato da WYSIWYG o Word piuttosto orribile e una varietà di riferimenti a entità carattere.

Q2: la stringa è un documento HTML?

La specifica HTML è incredibilmente allentata su ciò che considera un documento HTML . I browser fanno di tutto per analizzare quasi tutti i testi inutili come HTML. Due approcci: o considera semplicemente tutto HTML (poiché se consegnato con un text/htmlContent-Type, sarà fatto un grande sforzo per cercare di interpretarlo come HTML dallo user-agent) o cerca il marcatore del prefisso:

<!DOCTYPE html>

In termini di "buona formazione", questo e quasi nient'altro è "richiesto". Quello che segue è un documento HTML completo e completamente valido al 100% contenente ogni elemento HTML che pensi venga omesso:

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

Sì. Ci sono delle regole esplicite su come formare gli elementi "mancanti", come <html>, <head>e <body>. Anche se trovo piuttosto divertente che l'evidenziazione della sintassi di SO non sia riuscita a rilevarlo correttamente senza un suggerimento esplicito.

La mia soluzione è

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

C'è un pacchetto NPM is-html che può tentare di risolvere questo https://github.com/sindresorhus/is-html