带有 jQ​​uery 或纯 JavaScript 的 html 子字符串

Question

我目前遇到了问题。我有一个包含 html 的 div。但是如果 div 里面的 html 太长，我想把它缩短，最后加上三个点。现在使用纯文本，这将没有问题。使用 html 我的问题是这样的。假设我有

<div>
    Some <a href="someurl">LinkText</a> and a 
    <span class="this-class">special formatting that's also <b>bold</b></span>
</div>

现在如果我用这个来实现

$(theSelector).html($(theSelector).html().substring(0,50));

会导致这样的事情（我没有计算确切的长度；））

<div>
    Some <a href="someurl">LinkText</a> and a 
    <span class="this-

所以我最终会得到损坏的 html。解决这个问题的简单方法是使用文本而不是 html，但我想保留格式。谁能想出一种方法来很好地缩短它，同时又能正确地关闭所有标签？

Answer 1

最好不要在 HTML/JavaScript 级别解决这个问题。相反，请使用 CSS 的 overflow: hidden 和 text-overflow: ellipsis（您可能还需要 white-space: nowrap）：

.limit {
  width: 20em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="limit">
    Some <a href="someurl">LinkText</a> and a 
    <span class="this-class">special fomatting that's also <b>bold</b>
    </span>
</div>

遗憾的是，它会很乐意在单词中间添加省略号（请参阅this question），但您的 JavaScript 也会如此，所以...

但是如果由于某种原因你不能这样做并且你确实需要修改 DOM，我会通过处理文本节点来完成，而不是在 HTML 级别工作：

function applyEllipsis(target, chars) {
  var i, child, text;
  // Loop through child nodes, counting off characters from `chars` until we've
  // accounted for them all
  i = 0;
  while (i < target.childNodes.length) {
    child = target.childNodes[i];
    if (chars <= 0) {
      // Remove any remaining nodes
      target.removeChild(child);
    } else {
      switch (child.nodeType) {
        case Node.TEXT_NODE:
          // Normalize whitespace
          child.nodeValue = child.nodeValue.replace(/[\s\r\n]+/g, " ");
          if (child.nodeValue.length >= chars) {
            // We're all done, trim and add the ellipsis
            child.nodeValue = child.nodeValue.substring(0, chars) + "\u2026";
            chars = 0;
          } else {
            // Not done yet, subtract the number we've seen
            chars -= child.nodeValue.length;
          }
          break;
        case Node.ELEMENT_NODE:
          // Recurse
          chars = applyEllipsis(child, chars);
          break;
      }
      
      // Move to next child
      ++i;
    }
  }
  return chars;
}
applyEllipsis(document.querySelector(".limit"), 50);

<div class="limit">
    Some <a href="someurl">LinkText</a> and a 
    <span class="this-class">special fomatting that's also <b>bold</b>
    </span>
</div>

你可能需要稍微调整一下，但它应该能让你走上正确的道路。特别是，它会在块显示元素（例如，<div class="limit"> 和 Some 之间）的开头计算单个空白字符，浏览器不会将其显示为空格。

Answer 2

试试这样，使用正则表达式

var regex = /(<([^>]+)>)/ig
var html = jQuery("#container").html();
var result = html.replace(regex, "");
console.log(result.substr(0,50));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    Some <a href="someurl">LinkText</a> and a 
    <span class="this-class">special fomatting that's also <b>bold</b>
    </span>
</div>