Vérifiez si une chaîne est html ou non

J'ai une certaine chaîne pour laquelle je veux vérifier si c'est un html ou non. J'utilise regex pour le même mais n'obtiens pas le bon résultat.

J'ai validé mon regex et cela fonctionne très bien ici .

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

Voici le violon, mais l'expression régulière ne fonctionne pas là-dedans. http://jsfiddle.net/wFWtc/

Sur ma machine, le code fonctionne bien mais j'obtiens un faux au lieu de vrai comme résultat. Que manque-t-il ici?

Une meilleure regex à utiliser pour vérifier si une chaîne est HTML est:

/^/

Par exemple:

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

En fait, c'est tellement bon, qu'il retournera truepour chaque chaîne qui lui est passée, car chaque chaîne est HTML . Sérieusement, même s'il est mal formaté ou invalide, c'est toujours du HTML.

Si ce que vous recherchez est la présence d'éléments HTML, plutôt que simplement du contenu textuel, vous pouvez utiliser quelque chose du genre:

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

Cela ne vous aidera en aucun cas à analyser le HTML, mais cela marquera certainement la chaîne comme contenant des éléments HTML.

Méthode n ° 1 . Voici la fonction simple pour tester si la chaîne contient des données 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'idée est de permettre à l'analyseur DOM du navigateur de décider si la chaîne fournie ressemble ou non à un HTML. Comme vous pouvez le voir, il vérifie simplement ELEMENT_NODE( nodeTypesur 1).

J'ai fait quelques tests et il semble que cela fonctionne:

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

Cette solution détectera correctement la chaîne HTML, mais elle a un effet secondaire qui img / vide / etc. Les balises commenceront à télécharger la ressource une fois analysées dans innerHTML.

Méthode n ° 2 . Une autre méthode utilise DOMParser et n'a pas d'effets secondaires de chargement des ressources:

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

<sub>Remarques:
1. Array.fromest la méthode ES2015, peut être remplacée par [].slice.call(doc.body.childNodes).
2. La fonction de flèche dans l' someappel peut être remplacée par la fonction anonyme habituelle.</sub>

Un peu de validation avec:

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

Cela recherche des balises vides (certaines prédéfinies) et /des balises vides XHTML terminées et valide en HTML à cause de la balise vide OU capture le nom de la balise et tente de trouver sa balise de fermeture quelque part dans la chaîne pour la valider en HTML.

Démo expliquée: http://regex101.com/r/cX0eP2

Mettre à jour:

Validation complète avec:

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

Cela fait une validation correcte car il contient TOUTES les balises HTML, les vides en premier, suivies par les autres qui nécessitent une balise de fermeture.

Démo expliquée ici: http://regex101.com/r/pE1mT5

La réponse de zzzzBov ci-dessus est bonne, mais elle ne tient pas compte des balises de fermeture parasites, comme par exemple:

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

Une version qui capture également les balises de fermeture pourrait être la suivante:

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

Voici un sloppy one-liner que j'utilise de temps en temps:

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

Il retournera essentiellement truepour les chaînes contenant un <suivi de ANYTHINGsuivi de >.

Par ANYTHING, je veux dire essentiellement tout sauf une chaîne vide.

Ce n'est pas génial, mais c'est une ligne unique.

Usage

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

Comme vous pouvez le voir, c'est loin d'être parfait, mais pourrait faire le travail pour vous dans certains cas.

Toutes les réponses ici sont trop inclusives, elles recherchent simplement <suivies de >. Il n'y a pas de moyen parfait de détecter si une chaîne est HTML, mais vous pouvez faire mieux.

Ci-dessous, nous recherchons des balises de fin , et seront beaucoup plus serrées et plus précises:

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

Et le voici en action:

# 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 vous créez une expression régulière à partir d'une chaîne littérale, vous devez échapper à toute barre oblique inverse:

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

Ce n'est pas nécessaire si vous utilisez un littéral regex, mais vous devez ensuite échapper les barres obliques:

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

De plus, votre jsfiddle n'a pas fonctionné parce que vous avez affecté un onloadgestionnaire dans un autre onloadgestionnaire - la valeur par défaut définie dans le panneau Frameworks & Extensions sur la gauche consiste à envelopper le JS dans un fichier onload. Changez cela en une option nowrap et corrigez la chaîne littérale qui s'échappe et cela "fonctionne" (dans les limites que tout le monde a indiquées dans les commentaires): http://jsfiddle.net/wFWtc/4/

Pour autant que je sache, les expressions régulières JavaScript n'ont pas de références arrière. Donc cette partie de votre expression:

</\1>

ne fonctionnera pas dans JS (mais fonctionnera dans d'autres langues).

/<\/?[^>]*>/.test(str) Détecter uniquement s'il contient des balises html, peut être un xml

Avec jQuery:

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

En utilisant jQuery dans ce cas, la forme la plus simple serait:

if ($(testString).length > 0)

Si $(testString).length = 1, cela signifie qu'il y a une balise HTML à l'intérieur textStging.

Il existe des solutions sophistiquées impliquant l'utilisation du navigateur lui-même pour tenter d'analyser le texte, en identifiant si des nœuds DOM ont été construits, ce qui sera… lent. Ou des expressions régulières qui seront plus rapides, mais… potentiellement inexactes. Deux questions très distinctes se posent également à propos de ce problème:

Q1: Une chaîne contient-elle des fragments HTML?

La chaîne fait-elle partie d'un document HTML, contenant un balisage d'élément HTML ou des entités codées? Cela peut être utilisé comme un indicateur que la chaîne peut nécessiter un blanchiment / désinfection ou un décodage d'entité:

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

Vous pouvez voir ce modèle utilisé contre tous les exemples de toutes les réponses existantes au moment de la rédaction de cet article, ainsi que quelques exemples de texte ... plutôt hideux générés par WYSIWYG ou Word et une variété de références d'entités de caractères.

Q2: La chaîne est-elle un document HTML?

La spécification HTML est incroyablement lâche quant à ce qu'elle considère comme un document HTML . Les navigateurs vont à l'extrême pour analyser presque tous les textes inutiles au format HTML. Deux approches: soit simplement considérer tout HTML (car s'il est livré avec un text/htmlContent-Type, un gros effort sera dépensé pour essayer de l'interpréter comme HTML par l'agent utilisateur) ou rechercher le marqueur de préfixe:

<!DOCTYPE html>

En termes de "bonne formation", cela, et presque rien d'autre n'est "requis". Ce qui suit est un document HTML 100% complet et entièrement valide contenant tous les éléments HTML que vous pensez être omis:

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

Ouaip. Il existe des règles explicites sur la façon de former des éléments « manquants » tels que <html>, <head>et <body>. Bien que je trouve plutôt amusant que la coloration syntaxique de SO n'ait pas réussi à détecter cela correctement sans un indice explicite.

Ma solution est

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

Il existe un package NPM is-html qui peut tenter de résoudre ce problème https://github.com/sindresorhus/is-html