Question

我正在尝试创建一个脚本来动态创建锚标签和指向特定元素的链接。但是，当我输出锚文本时，它会在哈希和文本之间添加一堆空格。

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

此代码为anchorTextFull变量输出以下内容：

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

这些空间来自哪里？

由于

Answer 1

jQuery包含一个trim函数，可用于删除字符串开头或结尾的额外空格：

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

Answer 2

这个问题实际上是由HTML表现不同于JQuery引起的。在HTML中，空格和额外的行无关紧要。

在HTML中，这两个示例在呈现到页面时在视觉上是相同的：

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

和

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

但是，当您使用JQuery的.Text（）方法时，它们会产生不同的结果。

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

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

但这是非常不同的：

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

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

因此，如果你不能定制HTML，或者只是想安全地播放，那么需要.trim（）结果。

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

JSFiddle Working Example

Answer 3

这些可能来自$(this).text()。这些可能是h2代码中的新行字符。做alert("'" + $(this).text() + "'" )确认。

jQuery以某种方式为输出添加空格

3 个答案: