Question

<div id="target">
  <span>             Last Name              </span>,
  <span> First Name       </span>
</div>

由于某些未知原因，我在生成的跨度中获得了空白区域。在jQuery中是否有一个单行代码将它连接在一起而没有空格，也许是逗号之后的空格？

例如，

Last Name, First Name

问题在于：

$('#target').text().substring(0,30)

我将前面的结果放在标签中。所以在上面的例子中，

我应该看到整个Last Name, First Name 但我只是看到了 Last Name因为有额外的空白区域。

Answer 1

如果您希望它在编写时完美格式化，那么您有几个选择。第一个更复杂，但实际上会从HTML中删除空格。第二个选项只是从提取的字符串中删除它，并保持HTML不受影响。

对于第一个选项，您需要使用text(function)重载，该重载接收当前文本值并返回新值。

要正确处理逗号周围的间距，您实际上必须执行两次 - 一次在span上，一次在div上。根据要求，它在一行中有一点：

＆＃13;

// removeSpace replaces multiple whitespaces with a single space
var removeSpace = function(characterIndex, value) { return value.replace(/\s+/g, ' ').trim(); },
    targetText = removeSpace(null,
        $('#target').find('span').text(removeSpace) // handle the spans
            .end().text() // get the div text
    ).substring(0,30);

alert("'" + targetText + "'");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="target">
  <span>             Last Name              </span>,
  <span> First Name       </span>
</div>

＆＃13;

第二种选择是只进行一次正则表达式替换。您将需要使用match function overload删除逗号前的空格，否则您必须进行2次替换，这样更昂贵且更容易出错。

正则表达式只找到多个空格，可选后跟逗号。如果找到逗号，则将其用作替换值，否则只返回一个空格。您可以扩展逗号匹配以包括句号，冒号等

＆＃13;

var targetText = $('#target').text().trim()
    .replace(/(\s*)([,\.\:]?)\s*/g, function(all, spaces, punctuation) {
        return punctuation.length > 0 ? punctuation + ' ' :
        spaces.length > 0 ? ' ' : '';
    }).substring(0, 30);

alert("'" + targetText + "'");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="target">
  <span>             Last Name              </span>,
  <span> First Name       </span>
</div>

＆＃13;

Answer 2

这应该这样做：

$('#target').text().replace(/\s+/g,' ').replace(/ *, */g,', ').trim().substring(0,30)

段

＆＃13;

alert($('#target').text().replace(/\s+/g,' ').replace(/ *, */g,', ').trim().substring(0,30));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
  <span>             Last Name              </span>,
  <span> First Name       </span>
</div>

＆＃13;

Answer 3

尝试：

var text = $($('#target').children()[0]).html().trim() + ", " +$($('#target').children()[1]).html().trim();
$("#MyLabel").html( text );

修剪我的跨度中的空白

3 个答案:

段