Überprüfen Sie, ob der HTML-Code ist gültig mit Javascript

Gut, dieser code:

function tidy(html) {
    var d = document.createElement('div');
    d.innerHTML = html;
    return d.innerHTML;
}

Diese "richtige" fehlerhaftem HTML-Code, um die besten des Browsers. Wenn das für Sie hilfreich, es ist viel einfacher als zu versuchen, zu validieren, HTML.

InformationsquelleAutor der Antwort Niet the Dark Absol

Keiner der Lösungen bisher vorgelegt haben, ist zu tun, einen guten job in der Beantwortung der ursprünglichen Frage, vor allem, wenn es um

Ich nicht wollen, dass die Validierung fehl, weil etwas nicht 100%
standard (würde aber auch gehen).

tldr >> überprüfen Sie die JSFiddle

Also habe ich die Eingabe der Antworten und Kommentare zu diesem Thema und eine Methode erstellt, die Folgendes macht:

• prüft html-Zeichenketten-tag für tag, wenn gültige
• versucht zu Rendern des html-string
• vergleicht theoretisch erstellt werden, tag count mit der tatsächlich gerenderten html-dom-tag zählen
• wenn checked 'strenge', <br/> und leere Attribut Normierungen ="" werden nicht ignoriert
• vergleicht gerendert innerHTML mit bestimmten html-string (Ignorierung von Leerzeichen und Anführungszeichen)

Gibt

• wahr wenn gerenderten html gleich html-string
• falsewenn eine der Prüfungen fehl
• normalisiert html-string wenn gerenderten html scheint gültig, aber nicht gleich gegeben html-string

normalisiert bedeutet, dass auf die Wiedergabe, der browser ignoriert oder Reparaturen manchmal bestimmte Teile der Eingabe (wie das hinzufügen von fehlenden schließen-tags für <p> und wandelt andere (wie single zu double quotes oder Codierung der kaufmännische und-Zeichen).
Die Unterscheidung zwischen "Fehler" und "normalisiert" werden können, Kennzeichnen die Inhalte für den Nutzer ", wird dieser nicht gerendert, wie man es erwartet".

Meisten Zeiten normalisiert gibt wieder eine nur leicht veränderte version des original-html-string - immer noch, manchmal ist das Ergebnis ganz anders aus. Dies sollte verwendet werden, z.B. Kennzeichnen, die Benutzer-Eingabe zur weiteren überprüfung vor dem speichern in eine db oder macht Sie blind. (siehe JSFiddle Beispiele für die Normalisierung)

Die Schecks, die folgenden Ausnahmen in Betracht

• ignorieren der Normalisierung von single quotes zu double quotes
• image und anderen tags mit einem src Attribut 'entwaffnet' beim Rendern
• (wenn nicht strenge) ignorieren der <br/> >> <br> Konvertierung
• (wenn nicht strenge) ignorieren der Normalisierung der leere Attribute (<p disabled> >> <p disabled="">)
• Codierung der zunächst un-codierte kaufmännische und-Zeichen beim Lesen .innerHTMLz.B. in Attributwerten

.

function simpleValidateHtmlStr(htmlStr, strictBoolean) {
  if (typeof htmlStr !== "string")
    return false;

  var validateHtmlTag = new RegExp("<[a-z]+(\s+|\"[^\"]*\"\s?|'[^']*'\s?|[^'\">])*>", "igm"),
    sdom = document.createElement('div'),
    noSrcNoAmpHtmlStr = htmlStr
      .replace(/src=/, " svhs___src=") //disarm src attributes
      .replace(/&amp;/igm, "#svhs#amp##"), //'save' encoded ampersands
    noSrcNoAmpIgnoreScriptContentHtmlStr = noSrcNoAmpHtmlStr
      .replace(/\n\r?/igm, "#svhs#nl##") //temporarily remove line breaks
      .replace(/(<script[^>]*>)(.*?)(<\/script>)/igm, "$1$3") //ignore script contents
      .replace(/#svhs#nl##/igm, "\n\r"),  //re-add line breaks
    htmlTags = noSrcNoAmpIgnoreScriptContentHtmlStr.match(/<[a-z]+[^>]*>/igm), //get all start-tags
    htmlTagsCount = htmlTags ? htmlTags.length : 0,
    tagsAreValid, resHtmlStr;


  if(!strictBoolean){
    //ignore <br/> conversions
    noSrcNoAmpHtmlStr = noSrcNoAmpHtmlStr.replace(/<br\s*\/>/, "<br>")
  }

  if (htmlTagsCount) {
    tagsAreValid = htmlTags.reduce(function(isValid, tagStr) {
      return isValid && tagStr.match(validateHtmlTag);
    }, true);

    if (!tagsAreValid) {
      return false;
    }
  }


  try {
    sdom.innerHTML = noSrcNoAmpHtmlStr;
  } catch (err) {
    return false;
  }

  //compare rendered tag-count with expected tag-count
  if (sdom.querySelectorAll("*").length !== htmlTagsCount) {
    return false;
  }

  resHtmlStr = sdom.innerHTML.replace(/&amp;/igm, "&"); //undo '&' encoding

  if(!strictBoolean){
    //ignore empty attribute normalizations
    resHtmlStr = resHtmlStr.replace(/=""/, "")
  }

  //compare html strings while ignoring case, quote-changes, trailing spaces
  var
    simpleIn = noSrcNoAmpHtmlStr.replace(/["']/igm, "").replace(/\s+/igm, " ").toLowerCase().trim(),
    simpleOut = resHtmlStr.replace(/["']/igm, "").replace(/\s+/igm, " ").toLowerCase().trim();
  if (simpleIn === simpleOut)
    return true;

  return resHtmlStr.replace(/svhs___src=/igm, " src=").replace(/#svhs#amp##/, "&amp;");
}

Hier finden Sie es in ein JSFiddle https://jsfiddle.net/abernh/twgj8bev/ , zusammen mit verschiedenen test-Fälle, einschließlich

"<a href='blue.html id='green'>missing attribute quotes</a>" //FAIL
"<a>hell<B>o</B></a>"                                        //PASS
'<a href="test.html">hell<b>o</b></a>'                       //PASS
'<a href=test.html>hell<b>o</b></a>',                        //PASS
"<a href='test.html'>hell<b>o</b></a>",                      //PASS
'<ul><li>hell</li><li>hell</li></ul>',                       //PASS
'<ul><li>hell<li>hell</ul>',                                 //PASS
'<div ng-if="true && valid">ampersands in attributes</div>'  //PASS

.

InformationsquelleAutor der Antwort foobored

Verwendung von reinem JavaScript können Sie überprüfen, ob ein element vorhanden ist, verwenden Sie die folgende Funktion:

if (typeof(element) != 'undefined' && element != null)

Verwenden Sie den folgenden code wir können dies testen, in Aktion:

HTML:

<input type="button" value="Toggle .not-undefined" onclick="toggleNotUndefined()">
<input type="button" value="Check if .not-undefined exists" onclick="checkNotUndefined()">
<p class=".not-undefined"></p>

CSS:

p:after {
    content: "Is 'undefined'";
    color: blue;
}
p.not-undefined:after {
    content: "Is not 'undefined'";
    color: red;
}

JavaScript:

function checkNotUndefined(){
    var phrase = "not ";
    var element = document.querySelector('.not-undefined');
    if (typeof(element) != 'undefined' && element != null) phrase = "";
    alert("Element of class '.not-undefined' does "+phrase+"exist!");
    //$(".thisClass").length checks to see if our elem exists in jQuery
}

function toggleNotUndefined(){
    document.querySelector('p').classList.toggle('not-undefined');
}

Es sein kann gefunden auf JSFiddle.

InformationsquelleAutor der Antwort Leviscus Tempris

Hängt es von js-Bibliothek, die Sie verwenden.

Html validatod für node.js https://www.npmjs.com/package/html-validator

Html-validator für jQuery https://api.jquery.com/jquery.parsehtml/

Aber, wie bereits erwähnt, mit dem browser zu überprüfen gebrochen HTML ist eine tolle Idee:

function tidy(html) {
    var d = document.createElement('div');
    d.innerHTML = html;
    return d.innerHTML;
}

InformationsquelleAutor der Antwort Eugene Kaurov