2011-11-29 7 views
5

Tengo una página que comienza de la siguiente manera:Javascript para agarrar los comentarios de Javascript dentro <head>

<html> 
     <head> 
     <!-- 12036,2011-11-29/11:02 --> 
     <title>Products & Services</title> 

me gustaría agarrar el número 12036 aquí y para mostrarlo dentro de un DIV con posición absoluta en la parte inferior derecha de mi pantalla. Mi intención aquí es usarlo como un bookmarklet o como un script de Greasemonkey.

El propósito de esto es que el número representa una ID de PÁGINA que usamos referencia internamente.

Empecé usando:

var x = document.getElementsByTagName('head').innerHTML; 

pero no podía progresar más.

¿Alguien puede ayudar aquí?

+3

¿Puede cambiar la forma en que se publica la página? Es decir, si puede, ¿puede cambiar cómo se incluye este valor en su documento? Porque estás seguro de que es difícil para ti mismo en este momento. –

+1

No desafortunadamente. La cabeza es parte de una plantilla de CMS y volver a trabajar el orden/sintaxis de la cabeza sería bastante complicado. Teniendo en cuenta que mi pedido es por deseo en lugar de por necesidad, pasar muchas horas hombre en esto que no volará en el ojo de los que toman las decisiones. – rlsaj

Respuesta

6

Esto funcionará en navegadores más recientes, pero tendrá que modificarlo para adaptarlo a los navegadores antiguos ...

var commentNode = [].slice.call(document.head.childNodes).filter(function(node) { 
      return node.nodeType == 8; 
      })[0], 
    id = commentNode.data.match(/^\s*(\d+)/)[1]; 

para colocarlo en la esquina inferior de la pantalla ...

var elem = document.createElement('div'); 

elem.id = 'id-display'; 

elem.appendChild(document.createTextNode(id)); 

document.body.appendChild(elem); 

... y un toque de CSS ...

#id-display { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    background: #333; 
    color: #fff; 
    padding: 6px; 
} 

JSBin.

+1

+1 Mejor respuesta que la mía, en realidad analizas el número y usas cosas dulces de es5. ES5 shim debería resolver la mayoría de los problemas heredados de todos modos, así que no me preocuparía por eso. – Incognito

+0

@Incognito: Sí, eso y 'document.head' no existe en todas partes o' position: fixed' no funciona en IEs anteriores. Pensé que esto estaría bien, ya que parece que el OP quiere que este código ayude con el desarrollo. – alex

+0

Fantástico, gracias Alex y fue muy fácil de implementar. – rlsaj

1

getElementsByTagName devuelve una matriz de elementos. Deberá tomar el primer elemento de esa matriz antes de obtener innerHTML o cualquier otra cosa.

document.getElementsByTagName('head')[0].innerHTML 

En lugar de utilizar innerHTML es posible que desee considerar el uso de .childNodes y la conexión en bucle hasta encontrar nodos de comentario.

+2

Esa es solo la representación de cadena completa de la etiqueta de encabezado, no solo comentarios. – Incognito

+0

Correcto, es por eso que agregué el último bit sobre '.childNodes'.Puede haber estado editando mientras comentabas. –

2

Usted desea seleccionar cualquier elemento que está trabajando, vamos a llamarlo var ele;

var div = document.getElementsByTagName('div')[0]; 

Entonces usted quiere agarrar una matriz de todos los nodos secundarios dentro de ele, por lo var nodes = div.childNodes;

A continuación, bucle a través de ellos para su tipo de nodo, que para los comentarios es "8" as per the spec.

for (var i=0; i<nodes.length; i++){ 
    if (nodes[i].nodeType === 8) { 
     //Only comments go out to console. 
     console.log(nodes[i]); 
    }1 
} 

Here's a demo for you.

Tenga en cuenta que usted es NEVER TO EVER PARSE HTML WITH A REGULAR EXPRESSION.

+0

¡Gracias por la advertencia de" No analizar nunca "de incógnito! – rlsaj

Cuestiones relacionadas