jQuery ajoutant des espaces à la sortie

Question

J'essaye de créer un script pour créer dynamiquement des balises d'ancrage et des liens vers un élément spécifique. Cependant, lorsque je publie le texte d'ancrage, il ajoute un tas d'espaces entre le hachage et le texte.

$(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); 
    }); 
}); 

Ce code donne les résultats suivants pour la variable anchorTextFull:

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

Où sont ces espaces en venir?

Merci

Answer 1

jQuery inclut une fonction de garniture que vous pouvez utiliser pour supprimer des espaces supplémentaires au début ou à la fin d'une chaîne:

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

Answer 2

Ces viennent probablement du $(this).text(). Ceux-ci pourraient être les nouveaux caractères de ligne dans h2 étiquettes. Faites un alert("'" + $(this).text() + "'") pour confirmer.

Answer 3

Ce problème est en fait causée par HTML comporter différemment alors JQuery. En HTML, les espaces et les lignes supplémentaires n'ont pas d'importance.

En HTML, ces 2 exemples sont visuellement même lorsqu'ils sont rendus à la page:

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

et

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

Toutefois, lorsque vous utilisez la méthode .Text() de JQuery, ils donnent des résultats différents .

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

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

Mais ce qui est très différent:

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

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

Ainsi, la nécessité de .trim() les résultats si vous ne pouvez pas adapter le code HTML, ou tout simplement envie de jouer en toute sécurité.

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

JSFiddle Working Example