在javascript中截断包含HTML标签的字符串答案

【问题标题】：Truncate string containing HTML tags in javascript在javascript中截断包含HTML标签的字符串
【发布时间】：2018-08-24 12:57:15
【问题描述】：

给出了一个示例字符串。

s = "<p class="paragraph">Turnip greens yarrow ricebean rutabaga endive cauliflower sea  lettuce kohlrabi amaranth water <a href="https://www.google.pl/search?q=spinach" class="link">spinach</a> avocado daikon Süßkartoffel napa cabbage <strong>asparagus winter purslane kale. Celery potato scallion desert</strong> raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize <span style="font-size: 19px;color: blue;">bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</span> Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>"

字符串是 UTF-8 编码的。

我需要开发一个函数来截断字符串并在其末尾添加省略号。在以下情况下，被截断的字符串不得超过 n 个字符，包括省略号：

不要把单词分开；

不要将 html 元素分开；

所有打开的标签必须以适当的顺序关闭。

【问题讨论】：

是的，玩得开心。
好吧，你的代码在哪里？
请问您的最终目标是什么？看来text-overflow: ellipsis; 可能满足您的要求，而不是手动添加ellipsis 。
正确执行此操作的唯一方法恕我直言：解析它，以便获得可以迭代的 DOM 树。然后你按顺序遍历文本节点，总结你遇到的文本的长度，并找出在你的条件下出现“截止点”的位置。您将当前文本节点截断到该位置，然后从树中删除所有其他内容。

标签： javascript html function utf-8

【解决方案1】：

我相信这是一个在大多数情况下都应该有效的解决方案：

var s = "<p class='paragraph'>Turnip greens yarrow ricebean rutabaga endive cauliflower sea  lettuce kohlrabi amaranth water <a href='https://www.google.pl/search?q=spinach' class='link'>spinach</a> avocado daikon Süßkartoffel napa cabbage <strong>asparagus winter purslane kale. Celery potato scallion desert</strong> raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize <span style='font-size: 19px;color: blue;'>bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</span> Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>";

function trunc(str, n) {
  var openTags = [];
  var inTag = false;
  var openTagsSafe = [];
  var tagName = "";
  var tagNameComplete = false;
  var tagClosing = false;
  var lastSpace = 0;
  for (let p = 0; p < s.length && p < n; p++) {
    let c = str.charAt(p);
    switch (c) {
      case "<":
        lastSpace = ((!inTag && p + 3 < n) ? p : lastSpace);
        inTag = true;
        tagName = "";
        tagNameComplete = false;
        break;
      case ">":
        if (inTag && !tagNameComplete) {
          openTags.push({
            tag: tagName,
            p: p
          });
          tagNameComplete = true;
        }
        inTag = false;
        if (tagClosing) openTags.pop();
        tagClosing = false;
        tagName = ""; //may be redundant
        break;
      case "/":
        tagClosing = inTag;
        break;
      case " ":
        lastSpace = ((!inTag && p + 3 < n) ? p : lastSpace);
        if (inTag && !tagNameComplete) {
          openTags.push({
            tag: tagName,
            p: p
          });
          tagNameComplete = true;
        }
        break;
    }
    if (!tagNameComplete && c !== "<" && c !== ">") tagName += c;
  }
  //console.log(openTags, inTag, tagName, tagNameComplete, tagClosing, lastSpace);
  var small = str.substring(0, lastSpace)+"...";
  for (var i = openTags.length - 1; i >= 0; i--)
    if (openTags[i].p <= lastSpace) small += "</" + openTags[i].tag + ">";
  return small;
}

console.log(trunc(s, 300));

【讨论】：