[英]how to add a line break in javascript that works with paragraph
I wrote this function to format a certain string : 我写了这个函数来格式化某个字符串:
var desc = document.getElementById('desc');
var parContent = desc.textContent.trim();
var tempPar = "";
var j = 0;
var k = 0;
var built_val = "";
for (var i = 0; i < parContent.length ; i++)
{
if (j == 19 || i == parContent.length-1)
{
tempPar = parContent.substring(k, i);
tempPar = tempPar.concat("- \n");
built_val = built_val.concat(tempPar);
tempPar = "";
//Restart j
j = 0;
//update k
k = i;
continue;
}
j++;
}
desc.textContent = built_val;
Desc is a dynamic paragraph that is usually empty at first then filled (its data are composed after the page loads), j is the number of characters desired in one line. Desc是一个动态段落,通常通常首先为空然后填充(页面加载后构成其数据),j是一行中所需的字符数。
Though now I have another problem and that is \\n doesn't work ; 虽然现在我还有另一个问题,那是\\ n行不通的; I also tried br
我也试过
. 。 How can I insert a new linebreak within a javascript string such as "built_val" ?
如何在javascript字符串(例如“ built_val”)中插入新的换行符? please note how it's assigned to an Html
请注意如何将其分配给HTML
after everything. 毕竟。
The textContent property sets the literal text of the element (by adding a text node), and will not parse your tags as html. textContent属性设置元素的文字文本(通过添加文本节点),并且不会将标签解析为html。 Instead, you should do this:
相反,您应该这样做:
desc.innerHTML = built_val;
Yes, you're using .textContent
which is why <br>
s won't be parsed (which is a good thing!) 是的,您正在使用
.textContent
,这就是为什么<br>
不会被解析的原因(这是一件好事!)
You want to use document.createTextNode()
and document.createElement('br')
. 您要使用
document.createTextNode()
和document.createElement('br')
。
var desc = document.getElementById('desc');
var parContent = desc.textContent.trim();
var tempPar = "";
var j = 0;
var k = 0;
var built_val = "";
for (var i = 0; i < parContent.length; i++) {
if (j == 19) {
tempPar = parContent.substring(k, i);
tempPar = tempPar.concat("- \n");
desc.appendChild(document.createTextNode(tempPar)); desc.appendChild(document.createElement('br'));
tempPar = "";
//Restart j
j = 0;
//update k
k = i;
continue;
}
j++;
}
// No need for textContent anymore. Appending nodes did the work for us!
Just for fun: an Array.forEach
and String.slice
method: 只是为了好玩:
Array.forEach
和String.slice
方法:
var desc = document.querySelector('#desc'); var parContent = desc.textContent.trim(); var block = 0; parContent.split('').forEach( function(v, i) { if (i % 19 == 0) { desc.appendChild(document.createTextNode(parContent.slice(block, i))); desc.appendChild(document.createElement('br')); block = i; } } ); // last part desc.appendChild(document.createTextNode(parContent.slice(block)));
<p id="desc"> This string should be truncated every 19th position right? Ok, let's give it a try using [Array.forEach]<br> </p>
There's an easy regex version to wrap text as well: 有一个简单的正则表达式版本也可以包装文本:
function Wrap(src, maxLineLength) {
return src.replace(new RegExp("(.{1,"+maxLineLength+"})", "g"), "$1<br/>\r\n");
}
Though this wraps on characters, not words. 虽然这是围绕字符而不是文字。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.