新的行间距在jquery预览中不起作用

Question

在我的表单上，我可以点击一个预览按钮，它会显示一个推出的视图。

因为我使用replace(/</g, "&lt;").replace(/>/g, "&gt;")它会替换br周围的那个并且无法查看新行。我不希望它取代br周围的那些。

  

问题：如何不触及小于＆lt;并且大于＆gt;在前面的br标签周围？

Codepen代码View

Codepen Full View

脚本

$( document ).ready(function() {
    $('#preview-question').on('click', function (e) {
        $('.preview').html($('#question').val().replace(/\n/g, "<br />"));

        var str = $('.preview pre').html();
        $('.preview pre').html(str.replace(/</g, "&lt;").replace(/>/g, "&gt;"));

        $('pre').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    }); 
});

HTML

<form class="form-horizontal">
<div class="container">
<div class="row">

<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Create A New Question</h1>
</div>
<div class="panel-body">

<div class="form-group">
<label class="col-lg-2">Title</label>
<div class="col-lg-10">
<input type="text" name="title" class="form-control" placeholder="Title" />
</div>
</div>

<div class="form-group">
<label class="col-lg-2">Question</label>
<div class="col-lg-10">
<textarea name="question" id="question"  class="form-control" rows="10">
Testing Question Editor  

<pre>
<div class="test">
</div>
</pre>  
</textarea>
</div>
</div>

<div class="form-group">
<label class="col-lg-2"></label>
<div class="col-lg-10">
<div class="preview"></div>
</div>
</div>

</div>
<div class="panel-footer">
<div class="btn-group text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" id="preview-question" class="btn btn-default">Preview</button>
<a href="" class="btn btn-danger" role="button">Cancel</a>
</div>
</div>
</div>

</div>
</div>
</form>