如何让textarea标签中的内容原格式输出？

在前端开发中，如果你希望 textarea 标签中的内容以原格式输出，即用户输入的换行、空格等都应被保留并展示出来，你可以通过以下方式实现：

1. HTML 结构:

<textarea id="myTextarea" rows="4" cols="50">
这是第一行。
这是第二行，前面有两个空格。

这是第四行，与上一行之间有一个空行。
</textarea>

<pre id="output"></pre>
<button onclick="showText()">显示内容</button>

2. JavaScript:

使用 JavaScript 来获取 textarea 中的内容，并将其输出到一个 <pre> 标签中。<pre> 标签会保留文本的格式，包括空格、换行等。

function showText() {
    var text = document.getElementById('myTextarea').value;
    document.getElementById('output').textContent = text;
}

3. CSS (可选):

你可能还希望确保 <pre> 标签中的文本与 textarea 中的文本看起来相似。你可以通过 CSS 来实现这一点。

#output {
    font-family: monospace; /* 使用等宽字体 */
    white-space: pre-wrap; /* 保留换行和空格 */
    border: 1px solid #ccc; /* 可选的边框 */
    padding: 5px; /* 可选的填充 */
}

当用户点击“显示内容”按钮时，textarea 中的内容将被原格式复制到 <pre> 标签中，并保留所有的换行、空格等格式。

这种方法的好处是你可以很容易地在网页上以原格式展示 textarea 中的内容，而无需进行复杂的转换或处理。