jQuery de alguna manera agregando espacios a la salida

Estoy tratando de crear un script para crear dinámicamente etiquetas de anclaje y enlaces a un elemento específico. Sin embargo, cuando genero el texto de anclaje, agrega un montón de espacios entre el hash y el texto.

    $(document).ready(function(){
        $('.accordion h2').each(function(){
        var thisText = $(this).text();
        var anchorText = thisText.replace(/ /g, "-");
        var anchorLink = '<a name="' + anchorText + '"></a>';
        var anchorTextFull = '<a href="#' + anchorText + '">' + thisText + '</a>';
        $(this).before(anchorLink);
        $(this).after(anchorTextFull);
    });
});

Este código genera lo siguiente para la variable anchorTextFull:

    <a href="#     foo-bar">Foo Bar</a>

¿De dónde vienen estos espacios?

Muchas Gracias

preguntado el 16 de mayo de 11 a las 17:05

3 Respuestas

jQuery incluye una función de recorte que puede usar para eliminar espacios en blanco adicionales al principio o al final de una cadena:

var thisText =  $.trim($(this).text());

contestado el 16 de mayo de 11 a las 21:05

En realidad, este problema se debe a que HTML se comporta de manera diferente a JQuery. En HTML, los espacios y las líneas adicionales no importan.

En HTML, estos 2 ejemplos son visualmente iguales cuando se representan en la página:

<div id="vendor">Barracuda</div>

y

<div id="vendor">
    Barracuda
</div>

Sin embargo, cuando usa el método .Text () de JQuery, producen resultados diferentes.

<div id="vendor">Barracuda</div>

$('#vendor').text()  // equals  "Barracuda"

Pero esto es muy diferente:

<div id="vendor">
    Barracuda
</div>

$('#vendor').text()  // equals  "           Barracuda           "

Por lo tanto, la necesidad de .trim () los resultados si no puede adaptar el HTML, o simplemente quiere ir a lo seguro.

var thisText = $.trim($(this).text());

Ejemplo de trabajo de JSFiddle

contestado el 15 de mayo de 12 a las 22:05

Probablemente provengan del $(this).text(). Estos podrían ser los caracteres de nueva línea dentro h2 etiquetas. Hacer un alert("'" + $(this).text() + "'" ) para confirmar.

contestado el 16 de mayo de 11 a las 21:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.