jQuery 简单所见即所得替换

发布于 2024-12-09 00:13:51 字数 1052 浏览 0 评论 0原文

我的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} 替换为

; $content

它可以工作，但只有在我第一次将 {code} some content{/code} 放入文本区域时才有效，然后，从我第二次放置相同的 {code} some content{/code} 开始，它会显示第一个中的所有内容，如何将替换内容附加到所有 {code}$content{/code} 成立并且不仅仅在成立之初？

原文

my html.

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

now my 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,'<')
        .replace(/\>/g,'>')
        .replace(/\{code}(.*){\/code}/g, '<pre class="prettyprint"><code>$1</code></pre>')
        .replace(/\[br\]/g,'<br>');


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



     });

i'm trying replacing {code} $content {/code} with <pre><code> $content </code></pre> and it works, but it works only at first time that i put {code} some content{/code} inside the textarea, then from the second time that i put same {code} some content{/code} it shows all inside the first <pre><code></code></pre> , how can i attach the replacement to all the {code}$content{/code} founded and not only at the first founded?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绅刃 2024-12-16 00:13:51

正则表达式中有很多字符需要转义。我搞乱了它并制作了这个演示

哦，使用live没有'一开始似乎不配合我，所以我将其切换为bind，只是忘记将其切换回来......真的有必要吗？

var wysiwyg_val;

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

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

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

});

我不确定为什么 \n 被替换为然后更改转义尖括号，因为您可以在结果中看到它们，也许将\n 在替换块的末尾？

There are a bunch of characters that need escaping in the regex. I messed around with it and made this demo

Oh and using live didn't seem to cooperate with me at first, so I switched it to bind and just forgot to switch it back... is it really necessary?

var wysiwyg_val;

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

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

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

});

I'm not sure why the \n are replaced with <br> then changing the escaping the angled brackets, because you can see them in the result, maybe convert the \n at the end of the replacement block?

回复收藏 0 原文

~没有更多了~