Javascript Girl
  1. Javascript Girl
  3. Suppression des espaces blancs avancés de la source HTML indentée dans les tags pré / code
Intereting Posts
Champ de saisie, seuls les nombres jquery / js MediaStream capture la toile et l'audio simultanément Supprimer le marqueur dans Google Maps Api v3 Lien hypertexte pour lire la vidéo de youtube Comment brouiller l'élément div? XMLHttpRequest ne peut pas charger, l'en-tête «Access-Control-Allow-Origin» est présent sur la ressource demandée Ajout d'une série dynamiquement avec les graphiques d'actions HighCharts Filtrage de json similaire à mysql "like" operator Pouvez-vous dire à JSON.Net de sérialiser DateTime comme Utc, même s'il n'est pas spécifié? Récupérer les événements Google Calendar à l'aide de l'API v3 dans javascript Définir l'en-tête HTTP pour une demande Pseudo-classique vs "La voie JavaScript" Supprimez tous les espaces multiples dans Javascript et remplacez-le par un espace unique PhoneGap: Détecter si vous exécutez sur un navigateur de bureau La syntaxe (espace blanc) d'un retour de fonction javascript affecte-t-elle le résultat?

Suppression des espaces blancs avancés de la source HTML indentée dans les tags pré / code

J'ai actuellement le html suivant dans un bloc de pré-code: 

<pre class="prettyprint"><code> &lt;html&gt; &lt;body&gt; &lt;form name=&quot;input&quot; action=&quot;html_form_action.asp&quot; method=&quot;get&quot;&gt; &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot;&gt;Male&lt;br&gt; &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot;&gt;Female&lt;br&gt; &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt; &lt;/form&gt; &lt;p&gt;If you click the &quot;Submit&quot; button, the form-data will be sent to a page called &quot;html_form_action.asp&quot;.&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>

Il est indenté dans la source html pour une meilleure structure dans le document. Comment puis-je supprimer les espaces blancs principaux? Grâce à l'utilisation de javascript ou existe-t-il une méthode plus simple.

Vous voudrez peut-être simplement modifier la façon dont il est produit, mais il est assez simple à faire avec JavaScript 

 var p = document.querySelector(".prettyprint"); p.textContent = p.textContent.replace(/^\s+/mg, "");

http://jsfiddle.net/a4gfZ/

La question demande s'il existe une solution JavaScript ou une méthode plus simple pour supprimer les espaces blancs de tête. Il y a une méthode plus simple:

CSS 

 pre, code { white-space: pre-line; }

DEMO

Espace blanc

La propriété white-space est utilisée pour décrire comment les espaces blancs de l'élément sont gérés.

Pré-ligne

Les séquences d'espace blanc sont effondrées.

En prolongeant la solution ci-dessus, cet extrait suppose que l'indentation de la première ligne à l'intérieur de <pre> soit 0 et qu'elle réaligne toutes les lignes en fonction de la première ligne: 

 [].forEach.call(document.querySelectorAll('pre'), function($pre) { var lines = $pre.textContent.split('\n'); var matches; var indentation = (matches = /^\s+/.exec(lines[0])) != null ? matches[0] : null; if (!!indentation) { lines = lines.map(function(line) { return line.replace(indentation, ''); }); return $pre.textContent = lines.join('\n').trim(); } });

J'aime vraiment l'idée de Homam, mais j'ai dû la changer pour faire face à cela: 

 <pre><code><!-- There's nothing on this line, so the script thinks the indentation is zero --> foo = bar </code></pre>

Pour le réparer, je retire la première ligne si elle est vide: 

 [].forEach.call(document.querySelectorAll('code'), function($code) { var lines = $code.textContent.split('\n'); if (lines[0] === '') { lines.shift() } var matches; var indentation = (matches = /^[\s\t]+/.exec(lines[0])) !== null ? matches[0] : null; if (!!indentation) { lines = lines.map(function(line) { line = line.replace(indentation, '') return line.replace(/\t/g, ' ') }); $code.textContent = lines.join('\n').trim(); } });

(Je traite également les balises <code> au lieu des balises <pre> ).

Lorsque vous utilisez pre , vous devez formater son contenu pour être exactement comme vous voulez qu'il soit rendu. C'est l'idée même de pre (texte préformaté). Mais si c'est juste une indentation, vous pouvez utiliser CSS: margin-left avec une valeur négative appropriée.