要让 <textarea> 标签中的内容原格式输出，你需要处理空格、换行符和 HTML 特殊字符。以下几种方法可以实现：
1. 使用 <pre> 标签包裹输出内容:
这是最简单的方法，<pre> 标签会保留其中的空格和换行符。 你获取 textarea 的值，然后将其插入到 <pre> 标签中进行显示。
const textarea = document.getElementById('myTextarea');
const output = document.getElementById('output');
textarea.addEventListener('input', () => {
output.textContent = textarea.value;
});
// HTML:
// <textarea id="myTextarea"></textarea>
// <pre id="output"></pre>
2. 使用 CSS 的 white-space 属性:
你可以使用 white-space: pre-wrap; 或 white-space: pre-line; CSS 属性来控制输出的格式。
white-space: pre-wrap;保留所有空格和换行符，并在必要时进行换行。white-space: pre-line;合并多个空格为一个空格，并保留换行符。
// JavaScript (可选，用于动态更新):
const textarea = document.getElementById('myTextarea');
const output = document.getElementById('output');
textarea.addEventListener('input', () => {
output.textContent = textarea.value;
});
// CSS:
#output {
white-space: pre-wrap; /* 或 pre-line */
}
// HTML:
// <textarea id="myTextarea"></textarea>
// <div id="output"></div>
3. 将特殊字符转换为 HTML 实体:
为了防止 HTML 特殊字符（如 <、>、&）被解释为 HTML 代码，你需要将其转换为相应的 HTML 实体（如 <、>、&）。
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
const textarea = document.getElementById('myTextarea');
const output = document.getElementById('output');
textarea.addEventListener('input', () => {
output.innerHTML = escapeHtml(textarea.value); // 注意这里使用 innerHTML
});
// HTML:
// <textarea id="myTextarea"></textarea>
// <div id="output"></div>
选择哪种方法取决于你的具体需求:
- 如果你只需要保留空格和换行，使用
<pre>标签或white-spaceCSS 属性是最简单的。 - 如果你还需要处理 HTML 特殊字符，则需要使用 HTML 实体转换。
示例： 假设你的 textarea 输入内容为：
Hello
World!
<script>alert('XSS!');</script>
- 使用
<pre>或white-space: pre-wrap;输出：
Hello
World!
<script>alert('XSS!');</script> // 虽然显示了代码，但浏览器不会执行
- 使用 HTML 实体转换输出：
Hello
World!
<script>alert('XSS!');</script> // 代码被转换为文本显示，避免XSS攻击
记住，如果你的目标是防止 XSS 攻击，仅仅使用 <pre> 或 white-space 是不够的，你必须对 HTML 特殊字符进行转义。 使用 escapeHtml 函数或类似的方法来确保安全。