javascript - New line spacing not working in jquery preview -


on form can click preview button , shows me out putted view.

because use replace(/</g, "&lt;").replace(/>/g, "&gt;") replaces 1 around br , unable view new lines. not want replace ones around br.

enter image description here

question: how possible not touch less < , greater > around br tag in side pre?

codepen code view

codepen full view

script

$( 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 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>  


Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -