Javascript - value of textarea not formatted when put in <

Javascript - value of textarea not formatted when put in <p>

本文关键字：put when in lt formatted not value of textarea Javascript      更新时间：2023-09-26

我正在尝试从文本区域获取内容，并将其放入<p>中，然后打印，这样我就可以打印整个文本区域。然而，当我获取文本区域的值并将其放在<p>中时，它会丢失所有格式，因为所有内容看起来都像一个缩小的JS文件。有人知道在复制到<p>标签时如何保持格式吗？

我的代码：

document.getElementById('bigthing').style.display = 'none';
document.getElementById('printtext').style.display = 'block';
document.getElementById('printtext').innerHTML = document.getElementById('output').value;
window.print();
document.getElementById('printtext').style.display = 'none';
document.getElementById('bigthing').style.display = 'block';

因为在文本区域中，内容是一个字符串。换行符类似于"''n"。不是
。当您将其直接分配给段落元素（p）的"innerHTML"时，这些"''n"将被忽略，因为"''"是转义符。您将看到其余的纯文本。

document.getElementById('txtareafieldId').value //let value is aa in two lines => a'na'n
document.getElementById('paraId').innerHTML // it will display as "a a"

请注意a和a之间的空格。这是因为忽略了"''n"。

Regex替换换行符：

var val =  document.getElementById('txtareafieldId').value;
var fval = val.replace(/'n/g,"<br/>");
document.getElementById('paraId').innerHTML =fval;

您可以尝试增加文本区域的高度以包括所有内容，而不是在打印前读取文本区域的内容并将其放入段落中：

yourTextArea.style.height = yourTextArea.scrollHeight + "px";

然后你可以把它换回来。

相关文章：