js实现textarea换行

实现textarea换行的方法

在JavaScript中实现textarea换行通常涉及处理用户输入或动态设置内容时的换行符。以下是几种常见方法：

监听输入事件处理换行

const textarea = document.getElementById('myTextarea');
textarea.addEventListener('input', function(e) {
    this.value = this.value.replace(/\r?\n/g, '\n');
});

通过代码设置带换行的内容

const textarea = document.getElementById('myTextarea');
textarea.value = '第一行\n第二行\n第三行';

处理表单提交时的换行符

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const content = textarea.value.replace(/\n/g, '<br>');
    // 发送到服务器或显示处理后的内容
});

从数据库读取带换行的内容

// 假设从API获取的数据包含\n换行符
fetch('/api/content').then(res => res.json()).then(data => {
    textarea.value = data.content.replace(/<br\s*\/?>/gi, '\n');
});

注意事项

• HTML中换行符显示为\n，但在HTML渲染时需要转换为<br>标签
• 表单提交前建议将换行符编码为%0D%0A(CRLF)或%0A(LF)
• 不同操作系统可能使用不同换行符(Windows: \r\n, Unix: \n)

实际应用示例

保存到本地存储

localStorage.setItem('draft', textarea.value);
const savedText = localStorage.getItem('draft');
textarea.value = savedText;

显示换行内容到div

const displayDiv = document.getElementById('display');
displayDiv.innerHTML = textarea.value.replace(/\n/g, '<br>');