プレビューのdivの一部をhtmlのエンタテイメントに置き換える

Question

私のスクリプトでは、プレビューボタンをクリックしてアウトプットをプレビューできます。側で

私の前のタグ<と>どのように私はちょうど私が

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

を試してみました。しかし、BRタグであるため、HTMLエンティティに置き換えることができていオープン<div>と密接</div>があればそれは私が欲しくないbrの周りのものに取って代わります。私はちょうどちょうど開いていると閉じているdivの周りのものを私のpreタグの横に置きたいと思う。

質問：どのように私は唯一のオープンとクローズdivのラウンドHTMLエンティティ<と >に置き換えることができ

Codepen例Here

スクリプト

<script type="text/javascript"> 
$('#preview-question').on('click', function (e) { 
    var editor = $('#question').val(); 
    $('.preview').html(editor.replace(/\n/g, '<br/>')); 
    $('.preview pre').next('br').remove(); 

    if ($('.preview').find("pre").length > 0){ 
     var str = $('.preview pre').html(); 
     $(".preview pre div").replaceWith("&lt;div&gt;"); 
     //$('.preview pre').html(str.replace(/</g, "&lt;").replace(/>/g, "&gt;").next('div')); 
     $('.preview pre').html(str);  
     $('pre').each(function(i, block) { 
      hljs.highlightBlock(block); 
     }); 
    } 
}); 
</script> 

Answer 1

私はdiv要素のみを検出するforループを作成し、すべてを削除しました<br>。それは少し醜いですが、うまく動作します。

$('#preview-question').on('click', function (e) { 
 
\t var editor = $('#question').val(); 
 
\t $('.preview').html(editor.replace(/\n/g, '<br/>')); 
 
\t $('.preview pre').next('br').remove(); 
 

 
\t if ($('.preview').find("pre").length > 0){ 
 
\t \t var $str = $('.preview pre'); 
 
     var pre = $str.html(); 
 
     $str.html(""); 
 
     pre = pre.replace(/<br>/g,"\n") 
 
     for(t=0;t<pre.length;t++){ 
 
      if(pre.substr(t,1) == "<" && pre.substr(t+1,3) == "div"){ 
 
      $str.html($str.html() + pre.substr(0,t).replace(/</g, '&lt;')) 
 
      }else if(pre.substr(t,1) == "<" && pre.substr(t+1,4) == "/div"){ 
 
      $str.html($str.html() + pre.substr(0,t+5).replace(/</g, '&lt;')) 
 
      } 
 
      if(pre.substr(t,1) == ">" && pre.substr(t-3,3) == "div"){ 
 
      $str.html($str.html() + pre.substr(t,1).replace(/>/g, '&gt;')) 
 
      } 
 
     } 
 
\t } 
 
});

body { 
 
\t background-color: #F0F0F0; 
 
} 
 

 

 
.panel { 
 
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12); 
 
} 
 

 
.panel-default > .panel-heading { 
 
    background-color: #4d525b; 
 
    border-color: none; 
 
    color: #FFFFFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="panel panel-default"> 
 
<div class="panel-heading"> 
 
<h1 class="panel-title"></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"> 
 
Hello this is some code 
 
    
 
<pre> 
 
    <div class=""> 
 
    </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>