JavaScript-在N个字符后截断innerHTML字符串，其中包含strip any标记或arrtibute

我试图在通过JavaScript innerHTML方法从一个DIV抓取的130个字符后添加三个点。在innerHTML中，可能有更多的标记和属性需要在计数时跳过。还需要在操作完成后将截断的HTML保留并重新分配到同一个DIV中

下面是一些示例输入字符串和预期输出-

投入1：

<p>There are many <i>variations</i> of passages of <b>Lorem Ipsum</b> available, but the majority have suffered alteration in some form, by injected humour, or randomised words that don't look even slightly believable.</p>

有许多不同版本的《洛雷姆·伊普苏姆》（Lorem Ipsum）章节可用，但大多数都经历了某种形式的变化，比如注入的幽默，或者随机的词语，看起来甚至一点都不可信

产出1：

 <p>There are many <i>variations</i> of passages of <b>Lorem Ipsum</b> available, but the majority have suffered alteration in some form, by injecte...</p>

有许多不同的同侧耳道可供选择，但大多数都经历了某种形式的改变，通过注射

投入2：

<p><span class="header3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words that don't look even slightly believable.</span></p>

有许多不同版本的《洛雷姆·伊普苏姆》（Lorem Ipsum）章节可用，但大多数都经历了某种形式的变化，比如注入的幽默，或者随机的词语，看起来甚至一点都不可信

产出2：

<p><span class="header3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injecte...</span></p>

有许多不同的同侧耳道可供选择，但大多数都经历了某种形式的改变，通过注射

投入3：

<h4><span class="santral-pullquote-32"><span class="body-regular">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words that don't look even slightly believable.</span></span></h4>

Lorem Ipsum的段落有很多变体，但大多数都经历了某种形式的改变，比如注入幽默，或者随意使用看起来甚至不太可信的词语。

产出3：

<h4><span class="santral-pullquote-32"><span class="body-regular">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injecte...</span></span></h4>

现有的Lorem Ipsum的通道有很多变体，但大多数都经历了某种形式的改变，通过注射。。。

使用以下功能输入类型1仅起作用，其他类型则不起作用：

function cutString = (str) => {
    let stringCount = 0;
    let keepCounting = true;
    let ans = '';
    let openTags = [];
    for (let i = 0; i < str.length; i++) {
        if (str[i] == "<") {
            keepCounting = false;
            if (str[i + 1] != `/`) openTags.push(str[i + 1])
            continue;
        }
        if (str[i] == ">") {
            keepCounting = true;
            if (str[i - 2] == `/`) openTags.splice(openTags.indexOf(str[i - 2]), 1)
            continue;
        }
        if (keepCounting) stringCount++
        if (stringCount == 131) {
            ans = str.slice(0, i);
            break;
        }
    }
    openTags.forEach(tag => ans = ans + `&#8230;</${tag}>`);
    return ans;
}

函数cutString=（str）=>{
设stringCount=0；
让keepCounting=true；
让ans=''；
让openTags=[]；
for（设i=0；ians=ans+`…；`）；
返回ans；
}

我使用的是纯JavaScript（没有jQuery）。 任何帮助都将不胜感激！

---

提前谢谢。

你可以试试这个。请注意，此代码直接更新html，如果希望保留原始内容，请克隆要播放的节点，并使用克隆版本运行修剪：

function map_node(f_objNode,f_currLimit){
    for(var i=0;i<f_objNode.childNodes.length;i++){
      var l_node = f_objNode.childNodes[i];
      if(f_currLimit == 0){ //max length exceeded, remove node
        l_node.remove();
        i--; //move index backwards to account for the deleted node
        continue;
      }else if(l_node.nodeType == 3){ //textnode
        var l_strText = l_node.nodeValue;
        if((f_currLimit - l_strText.length) < 0){ //the text length
                                                  //exceeds the limit
                                                  //trim and 0 the limit
          l_node.nodeValue = l_strText.substring(0,f_currLimit) + '...';
          f_currLimit = 0;
        }else{ //max length is below the text length, update the limit
          f_currLimit -= l_strText.length
        }
      }
      //process the children of the node,
      //you can add check here to skip the call if no children
      f_currLimit = map_node(l_node,f_currLimit);
  }
  return f_currLimit
}

//this is how you use it.
function test(){
  var l_textLimit = 100; //your limit
  var l_div   = document.getElementById("test-div"); //your node
  var l_data  = map_node(l_div,l_textLimit); //parse the shit out of it
  //not really used, but if you replace the 
  //the limit integer with {} you can add postprocessing
  console.log(l_data)
}

函数映射节点（f\u objNode，f\u currLimit）{
对于（var i=0；i当设置限制60时，函数HTML文本将被截断为43个字符。输入：可用的Lorem Ipsum段落有很多变体，但大多数都经历了某种形式的更改，通过注入幽默或随机单词，看起来甚至不太可信。
输出：有许多变体的Lorem Ipsum段落Lo…
可能有空白，而控制台-f_objNode.childNodes；其显示方式类似于-三个数组，text，p，text。当我在控制台上打印第一个或最后一个数组时，其返回方式类似于-“\n”和“\n\n”最后，我不知道，您必须自己修复它，我在JSFIDLE中尝试过，它工作得很好，足以说明原理。