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

要让 <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, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

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-space CSS 属性是最简单的。
• 如果你还需要处理 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 函数或类似的方法来确保安全。