NorfiPC
NorfiPC » Códigos » Mostrar código fuente

Como extraer y escribir el código fuente de una página web



Mostrar el código fuente usado en una sección o bloque, el contenido de un script o archivo de estilo de un documento HTML, usando JavaScript. Extraer el código original en formato HTML, JavaScript y CSS y escribirlo automáticamente. Ejemplos.
Como extraer y escribir el código fuente de una página web
En todas las páginas de esta sección y en muchas de nuestro sitio web, compartimos código para copiar y pegar, en formatos HTML, JavaScript, PHP y CSS.
Para mostrar el código usamos snipetts, que consisten básicamente de elementos PRE y CODE dentro de los cuales se escribe el código manualmente.
Otra opción totalmente diferente consiste en generar usando JavaScript, el código fuente original que deseamos compartir, extrayéndolo del mismo documento HTML.
En muchos casos es preferible esta opción para ahorrarnos código adicional y para mostrar exactamente las instrucciones usadas.
En este artículo mostramos como hacerlo con varios ejemplos prácticos.



Extraer y mostrar código fuente con JavaScript


Con JavaScript podemos leer y extraer el código fuente usado en cualquier documento HTML, especificando el bloque o elemento con un identificador o usando su nombre.
Posteriormente escribimos la información preferentemente dentro de un elemento PRE, para mantener el formato original.
Para mostrar el código fuente de un documento HTML, es necesario escapar previamente los caracteres conflictivos (&<>) y a continuación usar la función "innerHTML".
Para mostrar todo el código fuente podemos usar: "document.documentElement.innerHTML"
En los siguientes ejemplos mostramos como escribir el código fuente usado en este mismo artículo en un bloque o sección en formato HTML, en el archivo de estilo CSS y en un script.



Mostrar el código HTML usado en un bloque o sección


Esto es solo un bloque demostrativo que usa un estilo "inline", cuyo código fuente se puede ver a continuación.
Código fuente del bloque anterior escrito automáticamente por JavaScript:

Script que extrae y escribe el código fuente anterior:
<script>
(function () {
  function htmlEscape(s) {
    return s
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
  }
  var codfuente1 = htmlEscape(
    document.getElementById("sample1").innerHTML);
  document.getElementById("code1").innerHTML = codfuente1;
})();
</script>
Como se puede comprobar el bloque de ejemplo está encerrado dentro de un contenedor con la ID "sample1" y el PRE donde JavaScript escribe el código posee el ID "code1".



Mostrar el código usado en un archivo de estilo CSS


De forma muy similar al anterior podemos mostrar el código fuente empleado en un archivo de estilo CSS interno o externo.
Solo necesitamos seleccionarlo usando: document.getElementsByTagName("style")[0].
Con el último valor especificamos la ubicación del archivo.
Código fuente del archivo de estilo CSS interno de esta página (minimizado), escrito automáticamente por JavaScript:

Script que extrae y escribe el código fuente anterior:
<script>
(function () {
  function htmlEscape(s) {
    return s
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
  }
  var codfuente2 = htmlEscape(
	document.getElementsByTagName("style")[1].innerHTML);
  document.getElementById("code2").innerHTML = codfuente2;
})();
</script>
En caso de hojas de estilo CSS externas que pueden ser muy extensas, es preferible mostrar el código solo a petición del lector, incluyendo un botón que inicie la función necesaria.
Por ejemplo:



Mostrar el código usado en un script


Código fuente del script usado en esta página, escrito automáticamente por JavaScript:

El valor "7" hace referencia a la posición del script en el HTML, antecedido por otros que escriben la publicidad.
Todos los navegadores permiten ver el código fuente de las páginas usando una opción en el menú contextual e incluyen herramientas de desarrollo que facilitan ver el de una sección específica.
No obstante resulta de mucha utilidad para compartir el código, extraerlo y mostrarlo usando JavaScript, como explicamos.
Haciendo algunos cambios, también se pueden agregar enlaces o botones para darles a los lectores más opciones, de las que ofrece cualquier navegador.

Páginas relacionadas



Comparte esta página




Sígueme en las redes sociales


Sígueme en Google Plus Sígueme en Facebook Sígueme en Twitter Sígueme en Pinterest





 
Inicio | Mapa del sitio | Sobre mí | RSS | Buscar