如何在获取 textarea 文本时保留换行符？

当从 textarea 中获取文本内容时，换行符会被自动转换为空格。这可能不是我们期望的行为，因为我们希望保留原始格式，并在后续处理中使用换行符进行分割。

问题解决

有几种方法可以解决这个问题。

方法1：使用正则表达式

我们可以使用正则表达式来替换所有的换行符为 <br> 标签。这样做可以将换行符保存为 HTML 格式，但在后续操作中可能需要再次转换。

示例代码：

const text = document.getElementById('my-textarea').value;
const formattedText = text.replace(/\n/g, '<br>');
console.log(formattedText);

方法2：使用 JavaScript 内置函数

JavaScript 提供了一个内置函数 encodeURIComponent()，它可以将字符串编码为 URI 组件。在这个过程中，换行符会被转换为 %0A 的形式，稍后我们可以通过解码来还原换行符。

示例代码：

const text = document.getElementById('my-textarea').value;
const encodedText = encodeURIComponent(text);
const decodedText = decodeURIComponent(encodedText).replace(/\+/g, ' ');
console.log(decodedText);

方法3：使用 ContentEditable 属性

另一个方法是将 textarea 转换为可编辑元素，并在元素中使用 div 来包装换行符。这种方法非常灵活，并且可以方便地在后续操作中使用。

示例代码：

<div id="my-editable" contenteditable="true"></div>

<script>
const editable = document.getElementById('my-editable');
editable.addEventListener('input', () => {
  console.log(editable.innerHTML.replace(/<div>/g, '\n').replace(/<\/div>/g, ''));
});
</script>

结论

以上是三种解决 textarea 换行符问题的方法。每种方法都有其优缺点，具体使用要根据实际情况来决定。在使用时，请先测试并理解其工作方式，以确保最终结果符合预期需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28580