jQuery単純なwysiwygの置換

Question

私のHTML。

<div class="wysiwyg"> 
<textarea></textarea> 
</div> 
<div class="wysiwyg-preview"></div> 

今私のjs。

var wysiwyg_val; 

    $('.wysiwyg textarea').live('keyup',function(){ 

     wysiwyg_val = $(this).val(); 

     wysiwyg_val = wysiwyg_val 
     .replace(/\n/g, "<br>") 
     .replace(/<br>/g,'[br]') 
     .replace(/\</g,'&lt;') 
     .replace(/\>/g,'&gt;') 
     .replace(/\{code}(.*){\/code}/g, '<pre class="prettyprint"><code>$1</code></pre>') 
     .replace(/\[br\]/g,'<br>'); 


     $('.wysiwyg-preview').html(wysiwyg_val); 



    }); 

私は{code} $content {/code} with <pre><code> $content </code></pre>を交換しようとしていると、それは動作しますが、それは私がテキストエリア内{code} some content{/code}を入れて、最初の時点でのみ動作し、その後、私は同じ{code} some content{/code}を入れて二回目からは、全ての第1 <pre><code></code></pre>の内側を示し、最初に設立されたばかりでなく、どのようにして{code}$content{/code}のすべてに交換部品を取り付けることができますか？

Answer 1

正規表現でエスケープする必要がある文字の束があります。私はそれで周り台無しとthis demo

ああとliveは、最初は私と一緒に協力していないようでした使用をしたので、私はbindにそれを切り替えてちょうどそれが本当に必要である...戻ってそれを切り替えるのを忘れて？ \nは<br>が、その後変更に置き換えられている理由

var wysiwyg_val; 

$('.wysiwyg textarea').bind('keyup', function() { 

    wysiwyg_val = $(this).val() 
     .replace(/\n/g, "<br>") 
     .replace(/\<br\/\>/g, '[br]') 
     .replace(/\</g, '&lt;') 
     .replace(/\>/g, '&gt;') 
     .replace(/\{code\}/g, '<pre class="prettyprint"><code>') 
     .replace(/\{\/code\}/g, '</code></pre>') 
     .replace(/\[br\]/g, '<br>'); 

    $('.wysiwyg-preview').html(wysiwyg_val); 

}); 

私はよく分からないあなたは多分交換用ブロックの最後に\nを変換し、その結果でそれらを見ることができるので、角括弧をエスケープ？