Comment formater/rangé/embellir en JavaScript

Comment puis-je formater/rangé/embellir HTML en JavaScript? J'ai essayé de faire un rechercher/remplacer pour crochets (<, >) et la mise en retrait en conséquence. Mais bien sûr, il ne prend pas en compte lorsque le est JS ou CSS etc à l'intérieur de l'HTML.

La raison pour laquelle je veux faire c'est que j'ai fait un éditeur de contenu (CMS), qui a WYSIWYG et vues du code source. Le problème le code écrit par l'éditeur WYSIWYG est normalement une seule ligne. Donc je voudrais un code JavaScript qui pourrait le format de ce dans une forme plus lisible sur demande.

Ici ce que j'ai à ce jour:

function getIndent(level) {
var result = '',
i = level * 4;
if (level < 0) {
throw "Level is below 0";
}
while (i--) {
result += ' ';
}
return result;
}
function style_html(html) {
html = html.trim();
var result = '',
indentLevel = 0,
tokens = html.split(/</);
for (var i = 0, l = tokens.length; i < l; i++) {
var parts = tokens[i].split(/>/);
if (parts.length === 2) {
if (tokens[i][0] === '/') {
indentLevel--;
}
result += getIndent(indentLevel);
if (tokens[i][0] !== '/') {
indentLevel++;
}
if (i > 0) {
result += '<';
}
result += parts[0].trim() + ">\n";
if (parts[1].trim() !== '') {
result += getIndent(indentLevel) + parts[1].trim().replace(/\s+/g, ' ') + "\n";
}
if (parts[0].match(/^(img|hr|br)/)) {
indentLevel--;
}
} else {
result += getIndent(indentLevel) + parts[0] + "\n";
}
}
return result;
}
  • parfois, les meilleures questions/réponses sont hors sujet.
  • de la foutaise c'est sur le sujet, en fait, il avait déjà été fermé en hors sujet et puis reopend de nouveau
  • Ici ultra simple HTML formateur en javascript
  • Votre code fonctionne bien, mais encore besoin de quelques améliorations. À l'appui de plus de singleton ou d'annuler les balises. Essayez de changer la méthode match si (pièces[0].match(/^(zone|base|br|col|commande|embed|rh|img|input|link|meta|param|source)/)). Également mettre à jour: de retour de résultat.trim(); au lieu de html = html.trim();
InformationsquelleAutor Petah | 2010-10-12
  1. 15

    @lovasoa Comment formater/rangé/embellir en JavaScript est une excellente solution.

    solide comme le roc, beaucoup mieux que vkBeautify ou même CodeMirror (difficile à utiliser AMD) et TRÈS facile

    <script src='http://lovasoa.github.io/tidy-html5/tidy.js'></script>
<script>
options = {
"indent":"auto",
"indent-spaces":2,
"wrap":80,
"markup":true,
"output-xml":false,
"numeric-entities":true,
"quote-marks":true,
"quote-nbsp":false,
"show-body-only":true,
"quote-ampersand":false,
"break-before-br":true,
"uppercase-tags":false,
"uppercase-attributes":false,
"drop-font-tags":true,
"tidy-mark":false
}
var html = document.querySelector("body").outerHTML;
var result = tidy_html5(html, options);
console.log(result);
</script>
    InformationsquelleAutor rickdog
  2. 1

    Vous pouvez également utiliser un outil de ligne de commande si vous avez node.js installer

    exécuter npm install -g uglify-js pour installer uglifyjs à l'échelle mondiale, vérifiez ici pour la documentation.

    Alors vous pouvez uglify index.min.js -b -o index.js

    • pourquoi downvote, c'est très facile à utiliser
    • Mon quess est parce que votre solution est pour le développement et non d'exécution à l'intérieur du navigateur, ce qui je pense est l'intention.
    InformationsquelleAutor nickleefly
  3. -1

    jQuery créateur John Resig a écrit un rapide et léger Analyseur HTML en javascript. Si vous êtes à la recherche d'une solution que vous pouvez ajouter directement à votre CMS, puis vous pourriez écrire un simple formatage automatique de la requête à l'aide de cette analyse comme une base. Tout vous devez faire est de reoutput les éléments en ajoutant des espaces et des sauts de ligne que vous le souhaitez, en utilisant l'api:

    HTMLParser(htmlString, {
start: function(tag, attrs, unary) {},
end: function(tag) {},
chars: function(text) {},
comment: function(text) {}
});

    Un avantage supplémentaire de cette approche est que vous pouvez utiliser la même HTMLParser à lire du HTML dans votre WYSIWYG, ou interagir avec l'utilisateur de votre HTML arbre. HTMLParser est également livré pré-monté avec un HTMLtoDOM méthode.

    InformationsquelleAutor Daniel Mendel
  4. -1

    Je crois que chrome et firebug de débogage de l'affichage du code de moteurs sont écrit en JS. C'est probablement plus lourd devoir que vous voulez vraiment jouer avec si.

    InformationsquelleAutor Paul McMillan
  5. -1

    Écrit le html sur une ligne téléchargement plus rapide pour le navigateur, donc je ne suis pas sûr que je le veux formaté. Peut-être une option pour la mise en forme de la version ou une version optimisée.

    Comme pour la question... vous pourriez faire un ajax appel après tant d'actions et d'envoyer le code pour le serveur pour être mis en forme et montré dans une autre zone à l'écran. Fondamentalement, il serait temps réel version de ce site, http://infohound.net/tidy/

    • Oui, il serait un peu plus rapide (comme 0.0001 d'une seconde). Mais compte tenu d'un éditeur WYSIWYG est destinée aux clients qui connaissent seulement un peu d'HTML, HTML formaté en fait un beaucoup plus facile. Également en ce qui concerne l'envoi des données au serveur pour la mise en forme, qui est loin d'être idéale.
    InformationsquelleAutor Eric
  6. -3

    Resig du module de formatage échoue avec un très simple cas de test:

    à http://ejohn.org/apps/htmlparser/

    dans le champ de saisie, entrez:

    <script src="/files/htmlparser.js"></script>
<script>
var x = 1;
</script>

    de la boîte de sortie rend:

    <script src="/files/htmlparser.js"></script>
<script></script>
var x = 1;
    • Et vous avez omis de répondre à cette question
    InformationsquelleAutor rickdog