Question

<script language="javascript">
    $("div.post-content , .parsedsig").each(function(){
        if($(this).html().indexOf("[/tabulaScriptum]") != -1) {
             pattern = /\[tabulaScriptum=(.*?)\]([^\[]*)\[\/tabulaScriptum\]/gi
             $(this).html($(this).html().replace(pattern, "<div class='tabulaScriptum'><div class='tabulaNomen'>$1</div><div class='tabulaImpleo'>$2</div></div>")) 
        }
    });
</script>

This script is working perfectly, except for one thing… I need not to replace [tabulaScriptum=][/tabulaScriptum] in certain elements. For example, I don’t want to replace those “tags” in element that has class .code-box. Is it possible?

Clarification: element .code-box is located within .post-content.

Clarification #2: this script creates simple division spoiler. .tabulaScriptum is spoier’s body, .tabulaNomen is spoiler’s name and button which, in turn, reveals(or hides) .tabulaImpleo on click. Reveal\hide script is located in some other place, and I didn’t post it here since it doesn’t really matter.

Clarification #3: http://jsfiddle.net/PRtsw/1/ fiddle.

Answer 1

There are a number of ways to do this. The first one that springs to mind is to use jQuery’s .not(selector) method.

http://jsfiddle.net/nate/2hNEA/

$(“div.post-content, .parsedsig”).not(‘.code-box’).each(function () {
…
});

Update #1

The clarification that .code-box was a child of .post-content came after I submitted this answer. That makes the problem a lot more interesting! I’d be interested to see how wiser heads than mine deal with this.

One solution that occurs to me is to take a two-pass approach.

First make your change just as you have implemented it, then go back and reverse the substition for .code-box divs.

http://jsfiddle.net/nate/2hNEA/1/

$("div.post-content .code-box .tabulaScriptum").each(function () {
    var $this = $(this);
    $this.before('[tabulaScriptum=]' + $this.text() + '[/tabulascriptum]');
    $this.remove();
});

I don’t know if this is the best way, but it seems to work.

Update #2:

Here’s another, simpler way:

Fiddle: http://jsfiddle.net/nate/2hNEA/2/

Just render the tabulaScriptum text inside any .code-box elements unrecognizable before doing your larger search/replace. Once you’ve finished, restore them.

// Temporarily render .code-box contained tabulas unrecognizable
$('.code-box').each(function () {
    var pattern = /\[tabula/gi;
        $(this).html($(this).html().replace(pattern, "[placeholder"));
});

// Search / Replace, as before...

// Restore .code-box contained tabulas
$('.code-box').each(function () {
    var pattern = /\[placeholder/gi;
        $(this).html($(this).html().replace(pattern, "[tabula"));
});​

Update #3:

Thanks for including a fiddle! Here’s your example with my last solution in place.

http://jsfiddle.net/nate/PRtsw/2/