截断文本，忽略子节点javascript答案

【问题标题】：truncating text, ignoring child nodes javascript截断文本，忽略子节点javascript
【发布时间】：2017-01-14 05:04:37
【问题描述】：

我正在尝试截断 div 中还包含 span 标签的字符串，但我的脚本正在收集 span 标签，将其转换为文本并将其推回，如何忽略标签中的子数据。

HTML：

<div class="oo-roboto-override row-title">
    <span class="hidden-lg-up" itemprop="name">
        Title: 
    </span>
    This is the text that I want to truncate
</div>

Javascript：

        $(".row-title").each( function() {
            var g = (this).innerHTML;
            var x = ". . . ";
            var leng = 50;
            var html = g.substring(0, leng)+"";
            var allHTML = html+x;
            $(this).text(allHTML);
        });

【问题讨论】：

标签： javascript truncate

【解决方案1】：

只需迭代文本节点：

$(".row-title").each(function() {
  var leng = 25;
  [].forEach.call(this.childNodes, function(child) {
    if(child.nodeType === 3) { // text node
      var txt = child.textContent.trim();
      if(txt.length > leng) {
        child.textContent = txt.substr(0, leng) + "…";
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="oo-roboto-override row-title">
  <span class="hidden-lg-up" itemprop="name">
    Title: 
  </span>
  This is the text that I want to truncate
</div>

【讨论】：

【解决方案2】：

如果我理解正确，你不想要这样的结果：

。 . .

但只有文字。

如果是这样你可以使用：

var g = $(this).text();

sn-p：

$(function () {
  $(".row-title").each( function() {
    var g = $(this).text().trim();
    var x = ". . . ";
    var leng = 50;
    var html = g.substring(0, leng)+"";
    var allHTML = html+x;
    $(this).text(allHTML);
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class="oo-roboto-override row-title">
    <span class="hidden-lg-up" itemprop="name">
        Title:
    </span>
    This is the text that I want to truncate
</div>

因为这个问题被标记为javaScript，所以这是完整js中的sn-p：

element.textContent：Node.textContent 属性表示一个节点及其后代的文本内容

window.addEventListener('DOMContentLoaded', function(e) {
  [].forEach.call(document.getElementsByClassName('row-title'), function(element, index) {
    var g = element.textContent.trim().replace(/\n */g, '');
    var x = ". . . ";
    var leng = 50;
    var html = g.substring(0, leng)+"";
    var allHTML = html+x;
    element.textContent = allHTML;
  });
});

<div class="oo-roboto-override row-title">
    <span class="hidden-lg-up" itemprop="name">
        Title:
    </span>
    This is the text that I want to truncate
</div>

【讨论】：

"This is the text that I want to truncate".length == 40 不应被截断，因为您的长度变量为 50。
@JoseHermosillaRodrigo 如果您仔细查看 div 的内容，您可能会看到换行符（即：\n）和其中的隐藏空格。如何处理这个字符？需要删除吗？
@JoseHermosillaRodrigo 我只更新了完整的 js sn-p 以及您如何查看，用空格删除了无用的 \n，现在字符串不再被截断。但问题是存在的：对吗？告诉我
好吧，我没有提出问题。但似乎他只是想截断文本This is the text I want to truncate，而且你现在正在截断Title: This is the text I want to truncate，我想他想要@Oriol 回答之类的东西。
@JoseHermosillaRodrigo 对我来说，很高兴收到 cmets。我喜欢你的cmets。你帮助我反思了更多。所以，再次非常感谢