javascript - sangria - sangrado de texto en html

Eliminación de los espacios en blanco iniciales de la fuente HTML con sangría en las etiquetas pre/código

Question

Actualmente tengo el siguiente html dentro de un bloque de código previo:

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

Está sangrado dentro de la fuente html para una mejor estructura dentro del documento. ¿Cómo puedo eliminar el espacio en blanco líder? A través del uso de javascript o hay un método más simple.

Answer 1

Cuando use pre , debe dar formato a su contenido para que sea exactamente como desea que se represente. Esa es la idea de pre (texto preformateado). Pero si solo se trata de una sangría, puede usar CSS: margin-left con un valor negativo adecuado.

Answer 2

Es posible que desee simplemente cambiar la forma en que se genera, pero es bastante simple de hacer con JavaScript

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

http://jsfiddle.net/a4gfZ/

Answer 3

Extendiendo la solución anterior, este fragmento asume que la sangría de la primera línea dentro de <pre> es 0 y realinea todas las líneas basadas en la primera línea:

[].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();
  }
});

Answer 4

La pregunta pregunta si hay una solución JavaScript o un método más simple para eliminar los espacios en blanco iniciales. Hay un método más simple:

CSS

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

DEMO

white-space

La propiedad de espacios en blanco se usa para describir cómo se manejan los espacios en blanco dentro del elemento.

pre línea

Se colapsan las secuencias de espacios en blanco.

Answer 5

Realmente me gusta la idea de Homam, pero tuve que cambiarla para lidiar con esto:

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

Para solucionarlo, simplemente saco la primera línea si está vacía:

[].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();
    }
});

(También estoy procesando etiquetas <code> lugar de etiquetas <pre> ).