Блог

Главная - Вопросы по программированию - jQuery простые замены wysiwyg

jQuery простые замены wysiwyg

#javascript #jquery #replace #wysiwyg

#javascript #jquery #заменить #wysiwyg

Вопрос:

мой 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,'amp;<')
        .replace(/>/g,'amp;>')
        .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} самое, оно показывает все внутри первого <pre><code></code></pre> , как я могу прикрепить замену ко всем {code}$content{/code} основанным, а не только к первому основанному?

Ответ №1:

Есть куча символов, которые нужно экранировать в регулярном выражении. Я повозился с этим и сделал эту демонстрацию

О, и использование live , похоже, сначала не помогло мне, поэтому я переключил его на bind и просто забыл переключить его обратно … это действительно необходимо?

 var wysiwyg_val;

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

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

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

});

Я не уверен, почему n они заменяются <br> затем изменением экранирования угловых скобок, потому что вы можете видеть их в результате, может быть, преобразовать n в конце блока замены?

Комментарии:

1. ну, ваш код действительно в порядке, и беспорядок был в этих 2 строках .replace(/{code}/g, ‘<pre class=»prettyprint»><code>’) .replace(/{/code}/g, ‘</code></pre>’)

2. я обратился к live() просто потому, что иногда я $.load() динамически модули, в которых есть этот скрипт внутри: P

3. Я запустил код через JSLint, и ему не нравится использовать . внутри регулярных выражений, поэтому я подумал, почему бы просто не разделить эту строку на две.

4. «.» где? .replace() вы имеете в виду?

5. В этом оригинале заменить .replace(/{code}(.*){/code}/g, '<pre class="prettyprint"><code>$1</code></pre>')