Разбивать длинную строку на небольшие части, не нарушая HTML тегов и слов - PullRequest
1 голос
/ 20 июня 2020

Я разбиваю длинный текст на более мелкие куски, используя while l oop. Моя строка содержит код 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 i = true;
      var start = 0;
      var end = 20;
      var increment = 0;
        var incremented = 0;
       var val1 = textString.slice(start,end);  
        while (i == true) {                                     
             val1 = data.slice(start,end);
                var check  = val1.endsWith(' ');
            while (check == false) {
            end = end+1;
                incremented = incremented+1;
            val1 = data.slice(start,end);
                if(val1.endsWith(' ')){
                check = false;
                }else{
                check = true;
                }
                 end = end+20+incremented;
                 start = start+20+incremented;
                 if(start>textString.length){
                      i=false;
                 }
         }
}

Пример здесь:

    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>';

и результат, который мне нужен, должен быть как

    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>';

Это мой Текущий результат: введите описание изображения здесь

Ответы [ 2 ]

2 голосов
/ 20 июня 2020

HTML DOM-узлы включают свое содержимое, поэтому вы не можете разделить их, не сломав их. Следующий код преобразует вашу строку в дерево DOM. Разделите все дочерние узлы и повторно объедините их без разрыва слов или HTML в зависимости от длины их текстового содержимого.

Если ваши данные плохие и, например, в них есть один абзац, который занимает больше чем одна страница или длинная серия букв без пробелов, тогда вам, вероятно, придется придумать индивидуальные решения для каждого типа тега HTML и длинных серий символов.

Даже с В этом решении вы можете обнаружить, что для сохранения предварительных тегов в целевых объектах вашей страницы необходимы дополнительные усилия.

Эта функция принимает два аргумента: вашу строку и максимальную длину, которую вы хотите для textContent в символах.

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;

};

Вероятно, это не то, что вы хотите использовать в производственной среде, но он делает попытку, где это возможно, разбить HTML на непрерывные части с целевой длиной текстового содержимого.

0 голосов
/ 20 июня 2020

вы можете разделить строку, используя пробелы

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...