textarea换行内容保存后前端显示异常，Firefox兼容问题求助

阿华AIGC实验室

2026-5-13

解决textarea换行跨浏览器展示不一致的问题

看起来你遇到的问题核心可能是两个点：选择器匹配错误，以及内容展示方式的适配问题。我来一步步帮你搞定：

首先，修正选择器的错误

你代码里的textarea id是aide-text-content，但判断逻辑里用的是$('#aide_content_text textarea')——这里把连字符-写成了下划线_，这会导致jQuery找不到目标元素，替换逻辑自然不会执行，这很可能是Firefox里方案无效的根本原因。

然后，选择正确的换行处理方案

如果是要在页面上显示换行效果，最稳妥的跨浏览器方案是把换行符替换成HTML的<br>标签，然后用html()方法插入到页面元素中（别用text()，它会把HTML标签转义成纯文本）。要是你坚持想用/作为换行分隔符，同样要确保选择器正确，再用合适的方法插入内容。

完整代码示例

HTML部分

<textarea id="aide-text-content"></textarea>
<button id="save-btn">保存</button>
<div id="confirmation-area">确认内容：</div>

JavaScript（jQuery）部分

$('#save-btn').click(function() {
    // 正确获取目标textarea元素
    const textarea = $('#aide-text-content');
    const content = textarea.val();
    
    // 更简洁的非空判断（val()返回的字符串length永远不会是null）
    if (content.trim().length > 0) {
        // 方案1：替换换行为HTML换行标签，实现页面换行展示
        const displayContent = content.replace(/(\r\n|\r|\n)/g, '<br>');
        // 方案2：替换换行为自定义分隔符（比如你原来的/）
        // const displayContent = content.replace(/(\r\n|\r|\n)/g, ' / ');
        
        // 用html()方法插入内容，确保HTML标签生效（用方案2的话，text()也可以）
        $('#confirmation-area').append(`<div>${displayContent}</div>`);
    }
});