使用 JS 在可见换行符上拆分文本 [不带 \n 或 <br>]
Split text [without \n or <br>] on visible line breaks with JS
我有一个最大宽度的跨度和一个没有 \n 或 < br> 的长文本。是否可以通过JS获取自动生成的换行符的位置?
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua" 在一个小跨度内中断例如这样:
"Lorem ipsum dolor sit amet,[break]
consetetur sadipscing elitr,[break]
sed diam voluptua
我需要在断行处拆分行或获取 "hidden line break" 个字符的索引。
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/
装饰中断 Polyfill "decofill" 在我添加 < br> 时在 Edge 上工作。但是在响应式视图中,当我添加硬编码的 HTML 换行符时,我会遇到问题。因此我需要在客户端添加它们。
我喜欢你的问题!挑战很大,我喜欢挑战!!
我将使用我自己的技巧来回答这个问题(通过 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>
result1 是一个对象,每个键是相关行的数量,值是该行的单词。
result2 是一个对象,每个键是行号,值是行本身。
我有一个最大宽度的跨度和一个没有 \n 或 < br> 的长文本。是否可以通过JS获取自动生成的换行符的位置?
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua" 在一个小跨度内中断例如这样:
"Lorem ipsum dolor sit amet,[break]
consetetur sadipscing elitr,[break]
sed diam voluptua
我需要在断行处拆分行或获取 "hidden line break" 个字符的索引。
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/
装饰中断 Polyfill "decofill" 在我添加 < br> 时在 Edge 上工作。但是在响应式视图中,当我添加硬编码的 HTML 换行符时,我会遇到问题。因此我需要在客户端添加它们。
我喜欢你的问题!挑战很大,我喜欢挑战!!
我将使用我自己的技巧来回答这个问题(通过 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>
result1 是一个对象,每个键是相关行的数量,值是该行的单词。
result2 是一个对象,每个键是行号,值是行本身。