2011-05-04 9 views
6

¿No es posible usar entidades HTML en un atributo de título?

La captura de pantalla de arriba es de Firefox. El cursor está sobre la mancha amarilla en el lado izquierdo de la imagen. Es un elemento <img> (bueno, en realidad es una imagen junto con un mapa de imagen que contiene un solo elemento circular <area>, pero supongo que esta distinción no es importante) que se ha creado y diseñado en JavaScript, incluida la aplicación de un atributo de título (construido por cortar y pegar cuerdas). ¿Cómo puedo hacer que esto se comporte y mostrar el carácter deseado, un en dash, en lugar de &ndash;? Funciona para innerHTML (el texto "Barrow-In-Furness" en la parte superior central izquierda es un div que también se creó usando JavaScript, y su conjunto innerHTML.)

Editar: En respuesta a la pregunta de Domenic: Here es la función de JavaScript que crea y aplica el atributo del título (además de realizar otros trabajos):

var StyleLinkMarker = function (LinkNumber, EltA, EltI) { 
    var AltText = LocationName[LinkStart[LinkNumber]] + 
        " to " + 
        LocationName[LinkEnd[LinkNumber]]; 
    if (!EltA) { 
     EltA = document.getElementById("link_marker_area" + LinkNumber); 
     EltI = document.getElementById("link_marker_img" + LinkNumber); 
    } 
    if (LinkStatus[LinkNumber] === 9) { 
     var CanBuyLinkCode = BoardPreviewMode ? 0 : CanBuyLink(LinkNumber); 
     if (CanBuyLinkCode === 0) { 
      EltI.src = ImagePath + "icon-buylink-yes.png"; 
      AltText += " (you can buy this " + LinkAltTextDescription + ")"; 
     } else { 
      EltI.src = ImagePath + "icon-buylink-no.png"; 
      AltText += " (you cannot buy this " + LinkAltTextDescription; 
      AltText += CanBuyLinkCode === 1 ? 
         ", because you aren't connected to it)" : 
         ", because you would have to buy coal from the Demand Track, and you can't afford to do that)"; 
     } 
    } else if (LinkStatus[LinkNumber] === 8 || 
       (LinkStatus[LinkNumber] >= 0 && LinkStatus[LinkNumber] <= 4) 
       ) { 
     EltI.src = ImagePath + "i" + LinkStatus[LinkNumber] + ".png"; 
     if (LinkStatus[LinkNumber] === 8) { 
      AltText += " (orphan " + LinkAltTextDescription + ")"; 
     } else { 
      AltText += " (" + 
         LinkAltTextDescription + 
         " owned by " + 
         PersonReference(LinkStatus[LinkNumber]) + 
         ")"; 
     } 
    } else { 
     throw "Unexpected Link Status"; 
    } 
    EltA.alt = AltText; 
    EltA.title = AltText; 
}; 

LocationName es el siguiente:

var LocationName = [ 
    "Barrow&ndash;In&ndash;Furness", "Birkenhead",    "Blackburn", "Blackpool", 
          "Bolton", "Burnley",      "Bury",  "Colne", 
        "Ellesmere Port", "Fleetwood",    "Lancaster", "Liverpool", 
        "Macclesfield", "Manchester",    "The Midlands", "Northwich", 
          "Oldham", "Preston",     "Rochdale", "Scotland", 
         "Southport", "Stockport", "Warrington &amp; Runcorn",  "Wigan", 
         "Yorkshire" 
]; 
+1

¿Estás seguro de que el '–' no está codificada en dos ocasiones como : '& ndash;' – Mark

+0

¿Cómo está configurando el atributo de título? Lo siguiente funciona bien: ' pruebame' – Domenic

+0

@Mark: estoy seguro de que no tiene doble codificación. En particular, si tuviera doble codificación, debería esperar que el texto audaz de Verdana en la parte superior media izquierda de la imagen también muestre la entidad HTML literalmente, en lugar de mostrar correctamente el carácter deseado. Esto se debe a que el contenido del div se crea a partir de la misma cadena de JavaScript. – Hammerite

Respuesta

5

no está configurando el título atributo , usted está estableciendo el título propiedad, que espera texto y no HTML (aunque el método setAttribute también espera una cadena de texto).

Hablando en general, al tratar con la manipulación de DOM, proporciona texto y no HTML. .innerHTML es la notable excepción a esta regla.

+0

Ya veo. ¿Cómo puedo establecer el atributo de título? – Hammerite

+0

Disparando todo el contenido del elemento padre y reemplazándolo usando innerHTML. Esta no es una buena idea Obtenga sus datos en formato de texto en lugar de formato HTML. (Podrías, aunque no lo recomendaría como un enfoque, establecer el 'innerHTML' de un' span' y luego leer 'data' del' textNode' que será el 'firstChild' de ese elemento ... pero es mejor obtener los datos sin codificación HTML desde la fuente) – Quentin

+0

Pude hacer que funcione usando texto UTF-8 en lugar de HTML. Esperaba que el ampersand literal en uno de los otros elementos de LocationName haría que la página no se validara, pero parece que sucede algo de magia para convertirla en una entidad. ¿No hay forma de convertir texto hacia y desde entidades HTML dentro de JavaScript? Parece sorprendente que así sea. – Hammerite

1

Aquí es una manera fácil de convertir de HTML a texto:

function convertHtmlToText(value) { 
    var d = document.createElement('div'); 
    d.innerHTML = value; 
    return d.innerText; 
} 

El código podría entonces ser actualizado a esto:

EltA.title = convertHtmlToText(AltText); 
+0

¡Esta es una solución increíblemente práctica, gracias!Es una pena que no exista una manera nativa de hacerlo, pero hay algo elegante sobre este método. –

Cuestiones relacionadas