javascript - 提交前创建文本区域预览

Question

拜托各位，我想创建一个像 STACKOVERFLOW 一样工作的页面立即显示文本，就像在文本区域中输入时所写的方式一样，我不擅长 javascript，但我确实弄清楚了这段代码:

$("#comment").keyup(function(){
    if($(this).val() == ""){
       $('#preview').css('display','none');
    }else{
       $('#preview').css('display','block');
    }
    $("#preview").html($(this).val());
    // $("#preview").text($(this).val()); // If you want html code to be escaped
    $("#preview").html($("#preview").html().replace(/`x3`/g,'<div id="code_put" class="code_put">'));
    $("#preview").html($("#preview").html().replace(/`z3`/g,'</div>'));
    var code = document.getElementById('code_put').innerHTML;
    $("#code_put").text(code);
    $("#code_put").html($("#code_put").html().replace(/!--/g,''));
    $("#code_put").html($("#code_put").html().replace(/--/g,''));
});

但是当我按 Enter 键时，它不会分解到预览 div 中的下一行，因为它在文本区域中分解。我想这不是实现我的目标的更好方法。如果有人对此有更好的方法，我将非常感激。

如果可能的话，我还希望文本区域中的编码也像在 stackoverflow 中一样显示在灰色 div 中，因为我在代码中添加了类似的内容，但我想这不是更好的方法。

这是html代码:

<textarea name="comment" id="comment" class="textarea"></textarea>
<div id="preview" class="preview">
</div>

这并不多，我猜它不相关。

提前致谢

Answer 1

您在帖子中提到的具体问题，即不保留换行符，可以用一行简单的 CSS 来修复:

white-space: pre-wrap;

但是，您的代码还有其他问题。最重要的是，您重复分配给元素的 innerHTML (尽管是通过 jQuery 的 .html() 函数)并从中读取。您几乎不应该从 innerHTML 中读取...

相反，从 preview = $(this).val(); 开始，然后在 preview 上执行各种替换或解析，最后在最前面结束，$("#preview").html(preview);