javascript - 用 html 实体替换我预览中的部分 div

Question

在我的脚本上，我可以通过单击预览按钮来预览我的输出。

如果有一个打开的<div>，在我的前置标签旁边并关闭 </div>用 < 找到和 >我怎样才能用我试过的 html 实体替换它

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

但是因为那里有 br 标签，所以它替换了 br 周围的标签，这也是我不想要的。我只想替换我的 pre 标签中打开和关闭 div 周围的那些。

Question: how can I just replace it with the html entities < and > only round the open and close divs

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

我已经制作了一个 for 循环，仅用于检测 div元素并删除所有 <br> .它有点丑，但工作正常。

$('#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');
        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;'))
          }
        }
	}
});

body {
	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>