基于jQuery实现双击文本编辑：回车换行与失焦格式处理问题

我帮你调整代码来实现这个需求，核心问题是原代码在替换换行时用了text()方法，会把<br>当成纯文本显示，而不是解析成换行效果，下面是修改后的完整实现：

核心思路 #

• 双击<li>时，保存原始文本，替换为<textarea>并自动聚焦
• 编辑时按回车键，<textarea>会自动换行，后续我们把这些换行符\n替换为<br>标签
• 失去焦点后，用html()方法把处理后的内容插入回<li>，这样<br>会被浏览器解析为换行，而不是显示成标签

修改后的代码 #

$("#parentUL").on('dblclick', 'li', function () {
    // 把原始值存在当前li的data里，避免全局变量冲突
    const $li = $(this);
    const oriVal = $li.html();
    $li.data('oriVal', oriVal);
    
    $li.empty();
    $("<textarea wrap='soft' rows='1'></textarea>")
        .appendTo($li)
        // 把原始html里的<br>转成textarea的换行符，保证编辑体验一致
        .val(oriVal.replace(/<br\s*\/?>/g, '\n'))
        .focus();
});

$("#parentUL").on('focusout', 'li > textarea', function () {
    const $textarea = $(this);
    const $li = $textarea.parent();
    const oriVal = $li.data('oriVal') || '';
    
    // 把textarea的换行转成<br>，用html()插入实现换行效果
    const newVal = $textarea.val().replace(/\n/g, '<br/>');
    $li.html(newVal || oriVal);
    $textarea.remove();
});

关键修改说明 #

1. 作用域优化：把原始值存在<li>的data属性里，避免全局变量在多个<li>操作时出现冲突
2. 文本与HTML转换：
   • 双击编辑时，把<li>里的<br>标签转成<textarea>里的换行符\n，让编辑时看到的是正常换行格式
   • 失去焦点时，把<textarea>里的换行符\n转成<br>，并用html()方法插入，让浏览器自动解析为换行效果
3. 换行行为优化：把wrap='off'改成wrap='soft'，输入时超出宽度会自动换行，同时回车会产生真正的换行符，保证编辑体验更自然

这样就能完美实现你想要的效果：双击可编辑，回车添加换行，失去焦点后只显示换行效果而看不到<br>标签～

内容的提问来源于stack exchange，提问作者Pat