Überprüfen Sie, ob eine Zeichenfolge HTML ist oder nicht

Ich habe eine bestimmte Zeichenfolge, für die ich überprüfen möchte, ob es sich um eine HTML-Datei handelt oder nicht. Ich verwende Regex für das gleiche, aber nicht das richtige Ergebnis.

Ich habe meine Regex validiert und es funktioniert hier gut .

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

Hier ist die Geige, aber der Regex läuft dort nicht hinein. http://jsfiddle.net/wFWtc/

Auf meinem Computer läuft der Code einwandfrei, aber als Ergebnis wird falsch statt wahr angezeigt. Was fehlt hier?

Ein besserer Regex, um zu überprüfen, ob eine Zeichenfolge HTML ist, ist:

/^/

Beispielsweise:

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

Tatsächlich ist es so gut, dass es truefür jede übergebene Zeichenfolge zurückgegeben wird, da jede Zeichenfolge HTML ist . Im Ernst, auch wenn es schlecht formatiert oder ungültig ist, ist es immer noch HTML.

Wenn Sie nach HTML-Elementen suchen und nicht nur nach Textinhalten, können Sie Folgendes verwenden:

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

Es hilft Ihnen nicht, den HTML-Code in irgendeiner Weise zu analysieren, aber es kennzeichnet die Zeichenfolge mit Sicherheit als HTML-Elemente enthaltend.

Methode 1 . Hier ist die einfache Funktion zum Testen, ob die Zeichenfolge HTML-Daten enthält:

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

Die Idee ist, dem Browser-DOM-Parser zu ermöglichen, zu entscheiden, ob die angegebene Zeichenfolge wie HTML aussieht oder nicht. Wie Sie sehen können, wird einfach nach ELEMENT_NODE( nodeTypevon 1) gesucht .

Ich habe ein paar Tests gemacht und es sieht so aus, als ob es funktioniert:

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

Diese Lösung erkennt HTML-Zeichenfolgen ordnungsgemäß, hat jedoch den Nebeneffekt, dass img / vide / etc. Tags beginnen mit dem Herunterladen der Ressource, sobald sie in innerHTML analysiert wurden.

Methode 2 . Eine andere Methode verwendet DOMParser und hat keine Nebenwirkungen beim Laden von Ressourcen:

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

<sub>Hinweise:
1. Array.fromist die ES2015-Methode, kann durch ersetzt werden [].slice.call(doc.body.childNodes).
2. Die Pfeilfunktion im someAnruf kann durch die übliche anonyme Funktion ersetzt werden.</sub>

Ein bisschen Validierung mit:

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

Dies sucht nach leeren Tags (einige vordefiniert) und /beendet leere XHTML-Tags und wird aufgrund des leeren Tags als HTML validiert. ODER erfasst den Tag-Namen und versucht, das schließende Tag irgendwo in der Zeichenfolge zu finden, um es als HTML zu validieren.

Erklärte Demo: http://regex101.com/r/cX0eP2

Aktualisieren:

Vollständige Validierung mit:

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

Dies führt eine ordnungsgemäße Validierung durch, da es ALLE HTML-Tags enthält , leere zuerst, gefolgt von den übrigen, die ein schließendes Tag benötigen.

Erklärte Demo hier: http://regex101.com/r/pE1mT5

Die obige Antwort von zzzzBov ist gut, berücksichtigt jedoch keine streunenden schließenden Tags, wie zum Beispiel:

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

Eine Version, die auch schließende Tags abfängt, könnte folgende sein:

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

Hier ist ein schlampiger Einzeiler, den ich von Zeit zu Zeit benutze:

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

Grundsätzlich wird truefür Zeichenfolgen zurückgegeben, die ein <gefolgt von ANYTHINGgefolgt von gefolgt sind >.

Damit ANYTHINGmeine ich im Grunde alles außer einer leeren Zeichenfolge.

Es ist nicht großartig, aber es ist ein Einzeiler.

Verwendung

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

Wie Sie sehen, ist es alles andere als perfekt, kann aber in einigen Fällen die Arbeit für Sie erledigen.

Alle Antworten hier sind zu umfassend, sie suchen nur nach, <gefolgt von >. Es gibt keine perfekte Möglichkeit, um festzustellen, ob eine Zeichenfolge HTML ist, aber Sie können es besser machen.

Im Folgenden suchen wir nach End-Tags , die viel enger und genauer sind:

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

Und hier ist es in Aktion:

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

Wenn Sie einen regulären Ausdruck aus einem Zeichenfolgenliteral erstellen, müssen Sie alle Backslashes vermeiden:

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

Dies ist nicht erforderlich, wenn Sie ein Regex-Literal verwenden, aber dann müssen Sie Schrägstriche vermeiden:

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

Außerdem hat Ihre jsfiddle nicht funktioniert, weil Sie einen onloadHandler in einem anderen onloadHandler zugewiesen haben. Die Standardeinstellung, die im linken Bereich "Frameworks & Extensions" festgelegt ist, besteht darin, den JS in einen zu verpacken onload. Ändern Sie dies in eine Nowrap-Option und korrigieren Sie das Escapezeichen des String-Literals, und es "funktioniert" (innerhalb der Einschränkungen, auf die alle in den Kommentaren hingewiesen haben): http://jsfiddle.net/wFWtc/4/

Soweit ich weiß, haben reguläre JavaScript-Ausdrücke keine Rückverweise. Also dieser Teil Ihres Ausdrucks:

</\1>

funktioniert nicht in JS (würde aber in einigen anderen Sprachen funktionieren).

/<\/?[^>]*>/.test(str) Nur erkennen, ob es HTML-Tags enthält, kann eine XML sein

Mit jQuery:

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

In diesem Fall wäre die einfachste Form bei Verwendung von jQuery:

if ($(testString).length > 0)

Wenn $(testString).length = 1 dies bedeutet, dass sich ein HTML-Tag darin befindet textStging.

Es gibt ausgefallene Lösungen, bei denen der Browser selbst verwendet wird, um zu versuchen, den Text zu analysieren und festzustellen, ob DOM-Knoten erstellt wurden, was… langsam sein wird. Oder reguläre Ausdrücke, die schneller sind, aber… möglicherweise ungenau. Es gibt auch zwei sehr unterschiedliche Fragen, die sich aus diesem Problem ergeben:

Q1: Enthält eine Zeichenfolge HTML-Fragmente?

Ist die Zeichenfolge Teil eines HTML-Dokuments, das HTML-Element-Markup oder codierte Entitäten enthält? Dies kann als Indikator dafür verwendet werden, dass die Zeichenfolge möglicherweise gebleicht / bereinigt oder entifiziert werden muss:

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

Sie können dieses verwendete Muster sehen aller Beispiele aus allen zum Zeitpunkt dieses Schreibens vorhandenen Antworten sowie anhand einiger… ziemlich abscheulicher, von WYSIWYG oder Word generierter Beispieltexte und einer Vielzahl von Verweisen auf Zeichenentitäten sehen.

F2: Ist die Zeichenfolge ein HTML-Dokument?

Die HTML-Spezifikation ist schockierend locker, was ein HTML-Dokument betrifft . Browser sind extrem bemüht, fast jeden Mülltext als HTML zu analysieren. Zwei Ansätze: entweder einfach alles HTML berücksichtigen (da bei Lieferung mit einem text/htmlInhaltstyp große Anstrengungen unternommen werden, um zu versuchen , es vom Benutzeragenten als HTML zu interpretieren) oder nach dem Präfix-Marker suchen:

<!DOCTYPE html>

In Bezug auf "Wohlgeformtheit" ist das und fast nichts anderes "erforderlich". Das Folgende ist ein 100% vollständiges, vollständig gültiges HTML-Dokument, das jedes HTML-Element enthält, von dem Sie glauben, dass es weggelassen wird:

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

Jep. Es gibt explizite Regeln, wie „fehlende“ Elemente wie zu bilden <html>, <head>und <body>. Obwohl ich es ziemlich amüsant finde, dass die Syntaxhervorhebung von SO dies ohne einen expliziten Hinweis nicht richtig erkennen konnte.

Meine Lösung ist

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

Es gibt ein NPM-Paket is-html, das versuchen kann, dieses Problem zu lösen: https://github.com/sindresorhus/is-html