Разделить текст [без \ n или <br>] на видимых разрывах строк с помощью JS - PullRequest
Новая
       22

Разделить текст [без \ n или <br>] на видимых разрывах строк с помощью JS

0 голосов
/ 12 сентября 2018

У меня есть диапазон с максимальной шириной и длинный текст без \ n или
. Можно ли получить позиции автоматически сгенерированных разрывов строк через JS?

"Lorem Ipsum Dolor Sit Amet, Contetur Sadipscing Elitr, Sed Diam Volptua" в течение небольшого промежутка времени, например, так:

"Lorem ipsum dolor sit amet, [перерыв]
контеретур садипсинг элитр, [перерыв]
Сед диам волуптуа "

Мне нужно разбить строки на разрывы или получить индекс "скрытых разрывов строк".

https://jsfiddle.net/DerLangeVonTetris/x63Ldcez/

HTML: 

<h1 class="multiline-headline">
    <span class="decoration-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua</span>
</h1>
<div class="preview"></div>

JS: 

(function () {
    var span = document.getElementsByTagName('span')[0],
        spanLines = [];

    // do magic start

    spanLines.push(span.innerText.slice(0,27));
    spanLines.push(span.innerText.slice(28,56));
    spanLines.push(span.innerText.slice(57));

    // do magic end

    document.getElementsByClassName('preview')[0].innerText = JSON.stringify(spanLines);    

}(window));

РЕЗУЛЬТАТ: 

["Lorem ipsum dolor sit amet,","consetetur sadipscing elitr,","sed diam voluptua"]

Зачем мне это нужно:

https://jsfiddle.net/DerLangeVonTetris/xgbsvpdy/

Полифилл с декорацией "decofill" работает на Edge, когда я добавляю. Но при адаптивном просмотре возникают проблемы, когда я добавляю разрывы строк HTML в жестком коде. Поэтому мне нужно добавить их на стороне клиента.

1 Ответ

0 голосов
/ 12 сентября 2018

Мне нравится твой вопрос!у него большая проблема, и мне нравятся проблемы !!

Я собираюсь использовать свой собственный трюк для ответа на этот вопрос (через pure js и впервые - без того же самого): 

function MyOwnSplit(myTextDiv){
  var res = myTextDiv.innerHTML.trim().split(/ +/).map(function(t){
    return "<span>"+t+" </span>";
  });
  var mainText = myTextDiv.innerHTML;
  var fakeDiv=document.createElement("div");
  fakeDiv.innerHTML=res.join("");
  fakeDiv.setAttribute("style", myTextDiv.getAttribute("style"));
  fakeDiv.style.visibility='hidden';
  myTextDiv.insertAdjacentElement("afterend", fakeDiv);
  var finalRes={}, l=0, prvCTop=-Infinity;
  fakeDiv.childNodes.forEach(function(c){
    var top = c.offsetTop, A;
    if(top!=prvCTop) {
      l+=1;
      finalRes[l]=(A=[]);
      prvCTop=top;
    } else A=finalRes[l];
    A.push(c.innerHTML.trim());
  });
  fakeDiv.parentElement.removeChild(fakeDiv);
  return finalRes;
}
var res=MyOwnSplit(document.querySelector(".my-text"));
console.log(JSON.stringify(res));
//or getting all lines:
var r={};
for(var lN in res) {r["Line"+lN]=res[lN].join(" ");};
console.log(JSON.stringify(r));
<div style='width: 110px; border: solid 1px #f0f0f0' class='my-text'>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua
</div>
<b>You can change the "width" and see the result.</b>

  • Результатом1 является объект, в котором ключом является число связанных строк, а значением являются слова этой строки.

  • Результатом2 является объект, для которого ключом является номер строки, а значением является сама строка.

...