Question

从我的容器中，我正在尝试fetch text。但是有些原因，我在某些情况下没有得到word space。我在这里没有得到确切的问题以及如何解决这个问题..

在这个html我的控制非常有限，因为我从服务器获得了html。

有人给我一个解决方案吗？

var myText = $('.textHighLight').text();
$('#parent').before(myText);

//look in to here: ANDMAINTENANCE, OFAL-GHARAFA (both AND and OF) lost their space.

#parent{
    border:1px solid red;
    position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
    <div style="white-space:pre;"><span class="cls_3 textHighLight userNote1">CONSTRUCTION</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">COMPLETION</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">AND</span></div>
<div style="white-space:pre;"><span class="cls_3 textHighLight userNote1">MAINTENANCE</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">OF</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">OUTDOOR</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">COOLING</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">OF</span></div>
<div style="white-space:pre;"><span class="cls_3 textHighLight userNote1">AL-GHARAFA</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">SPORTS</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">CLUB</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">FOR</span><span class="cls_4 textHighLight userNote1"> </span><span class="cls_3 textHighLight userNote1">ASPIRE</span></div>
<div style="white-space:pre;"><span class="cls_3 textHighLight userNote1">ZONE</span></div>
</div>

Answer 1

你的行var myText = $('.textHighLight').text();从带有类textHighLight的元素获取文本作为单个字符串，您需要使用$.each()循环遍历所有元素并传入文本并附加它，如：

var textArr = [];
$.each( $('.textHighLight'), function(idx, v) {
    textArr.push($(v).html());
});
$('#parent').before(textArr.join(" "));

Answer 2

您的代码中没有元素，您会看到空的跨度，

  <span class="cls_4 textHighLight userNote1"> </span>

这是在某些情况下添加空格的位置，要么删除它们，请使用DemoUser's answer

或者只是添加它们，不添加它们。见Fiddle

在某些情况下，`text`方法会删除单词之间的空格

2 个答案: