Javascript 将长字符串拆分为小块，而不打断HTML标记和单词

我使用while循环将长文本分解成更小的块。我的字符串包含html代码，我不希望用户看到那些打开或关闭的大括号

我的模板字符串包含以下文本

var text = "I love Stackoverflow. It helps me lot and Bla bla bla bla bla bla ";

var textString = '<div class="row page col-md-12 "><h4 style="margin-left:20px;"> 
<u> Working from home</u></h4><p style="margin:30px;">'+text+'<p></div>';

例如：

    var text1 = 'I love Stackoverflow. It helps me lot and Bla bla bla bla bla 
    bla';
    var text2 = 'Some Random Text';
    var text3 = 'Some Random Text';
    var text4 = 'Some Random Text';
    var text5 = 'Some Random Text';
    var text6 = 'Some Random Text';

    var textString = '<div class="row page col-md-12 "><h4 style="margin-left:20px;"> 
    <u> text1 </u></h4><p style="margin:30px;">'+text2+'<p></div>
    <div class="row page col-md-12 "><h4 style="margin-left:20px;"> 
    <u> text3</u></h4><p style="margin:30px;">'+text4+'<p></div>
    <div class="row page col-md-12 "><h4 style="margin-left:20px;"> 
    <u>text5</u></h4><p style="margin:30px;">'+text6+'<p></div>';

var text1='我喜欢Stackoverflow。这对我很有帮助
布拉'；
var text2='一些随机文本'；
var text3='一些随机文本'；
var text4='一些随机文本'；
var text5='一些随机文本'；
var text6='一些随机文本'；
var textString='1〕
text1
”+text2+”
text3
”+text4+”
text5
”+text6+””；

我需要的输出应该是

    arr[0] = ' <div class="row page col-md-12 "><h4 style="margin-left:20px;"> 
    <u> text1</u></h4><p style="margin:30px;">'+text2+'<p></div>';

    arr[1] = '<div class="row page col-md-12 "><h4 style="margin-left:20px;">  
    <u> text3</u></h4><p style="margin:30px;">'+text4+'<p></div>';

    arr[2] = '<div class="row page col-md-12 "><h4 style="margin-left:20px;"> 
    <u> text5</u></h4><p style="margin:30px;">'+text6+'<p></div>';

arr[0]='
text1
”+text2+””；
arr[1]='
text3
”+text4+””；
arr[2]='
text5
”+text6+””；

这是我当前的输出：

---

HTML DOM节点包含它们的内容，因此您无法在不破坏它们的情况下拆分它们。下面的代码将把字符串转换成DOM树。拆分所有子节点，并根据其文本内容的长度在不中断单词或HTML的情况下重新组合它们

如果您的数据不好，例如，有一个段落占用多页，或者有一长串没有空格的字母，那么您可能需要为每种类型的HTML标记和长串字符提供自定义解决方案

var shard = function(str, len) {

    var el = document.createElement('div');
    el.innerHTML = str;
    var child = el.firstChild;

    var parts = [];
        while(child) { 
          if (child.nodeType == 3) {
            var texts = child.nodeValue.split('')
              .reduce(function(a,b){ 
                 if (b.split(/\s/).length > 1) { 
                    a[a[a.length-1].length > 0 ? a.length: a.length - 1] = b; 
                    a[a.length] = ''
                 } else { 
                    a[a.length - 1] = a[a.length - 1] + b;
                 } return a; },['']);
            for(var idx=0; idx<texts.length; idx++) {
                parts.push(document.createTextNode(texts[idx]));
            }
          } else {
            parts.push(child);
          } 
          child = child.nextSibling; 
        }        

    var textParts = parts.map(function(el) { return el.textContent; });

    
    var partsOut = [''];

    var t = 0;

    for(var idx=0; idx<parts.length; idx++) {

        if ((t + textParts[idx].length) > len) {
          partsOut[partsOut.length] = parts[idx].nodeType == 3 ? 
              parts[idx].nodeValue : parts[idx].outerHTML;
          t = textParts[idx].length;
        } else {
          partsOut[partsOut.length - 1] = partsOut[partsOut.length - 1] + (
             parts[idx].nodeType == 3 ? 
             parts[idx].nodeValue : 
             parts[idx].outerHTML
         );
          t += textParts[idx].length;
        }

        
    }

    return partsOut;

};

即使使用此解决方案，您也可能会发现在页面目标中保留pre标记还需要付出额外的努力

此函数接受两个参数：字符串和文本内容的最大长度（以字符为单位）

var shard = function(str, len) {

    var el = document.createElement('div');
    el.innerHTML = str;
    var child = el.firstChild;

    var parts = [];
        while(child) { 
          if (child.nodeType == 3) {
            var texts = child.nodeValue.split('')
              .reduce(function(a,b){ 
                 if (b.split(/\s/).length > 1) { 
                    a[a[a.length-1].length > 0 ? a.length: a.length - 1] = b; 
                    a[a.length] = ''
                 } else { 
                    a[a.length - 1] = a[a.length - 1] + b;
                 } return a; },['']);
            for(var idx=0; idx<texts.length; idx++) {
                parts.push(document.createTextNode(texts[idx]));
            }
          } else {
            parts.push(child);
          } 
          child = child.nextSibling; 
        }        

    var textParts = parts.map(function(el) { return el.textContent; });

    
    var partsOut = [''];

    var t = 0;

    for(var idx=0; idx<parts.length; idx++) {

        if ((t + textParts[idx].length) > len) {
          partsOut[partsOut.length] = parts[idx].nodeType == 3 ? 
              parts[idx].nodeValue : parts[idx].outerHTML;
          t = textParts[idx].length;
        } else {
          partsOut[partsOut.length - 1] = partsOut[partsOut.length - 1] + (
             parts[idx].nodeType == 3 ? 
             parts[idx].nodeValue : 
             parts[idx].outerHTML
         );
          t += textParts[idx].length;
        }

        
    }

    return partsOut;

};

var shard=函数（str，len）{
var el=document.createElement（'div'）；
el.innerHTML=str；
var child=el.firstChild；
var部分=[]；
而（儿童）{
if（child.nodeType==3）{
var text=child.nodeValue.split（“”）
.reduce（函数（a，b）{
如果（b.split（/\s/）.length>1）{
a[a.length-1]。长度>0？a.length:a.length-1]=b；
a[a.长度]=''
}否则{
a[a.长度-1]=a[a.长度-1]+b；
}返回一个；}，['']）；
对于（var idx=0；idx，可以使用空格拆分字符串

let wordsArray = text.split(" ")

然后减少到你想要的任何块

let chunks = Array()
const wordsInChunkCount = 100
let temp = wordsInChunkCount
let str = ''
wordsArray.forEach(item => {
  if (temp > 0) {
    str += ' ' + item
    temp--
  } else {
    chunks.push(str)
    str = ''
    temp = wordsInChunkCount
  }
})

之后，您将在
chunks
array
中拥有您的区块，您想做什么？我正在使用turn.js创建翻页书，我有很长的文本，我想将其分解为较小的区块。上面给出的字符串只是一个示例，我有一个包含数百行文本的字符串，其中一些文本行用包装一些样式，我想在前端显示它，而不破坏任何英语单词或任何HTML标记，但你的意思是什么更小的块？你只是想让文本和HTML标记彼此分开吗？你能为你的示例提供预期的输出吗？我有超过2k个单词的长文本字符串，小块意味着600个单词的小字符串o在翻页书的每一页上显示给用户。这些小字符串可能包含HTML标记，我不希望它们被破坏。其他明智的用户可以看到
背景色：红色；文本对齐：中间'>