Question

I’m looking for a way to target a specific marker in a document, like for instance !divide! or --divide-- Something that doesnt normally exist in language written by normal humanbeings yet something that doesnt take a rocket scientist to conjure and yet again one that is distinct from regular text.

Then target that !divide! and wrap text while removing !divided!. Like this:

Lorem ipsum dolor !divide! sit amet becomes >>

<p>Lorem ipsum dolor</p> <p>sit amet</p>

And

Lorem !divide! ipsum dolor !divide! sit amet becomes >>

<p>Lorem</p> <p>ipsum dolor</p> <p>sit amet</p>

This is.. Well, this is what i have so far. More than anything, it’s me trying to get my thoughts together and try to tell what im looking for here: http://jsfiddle.net/PvMJL/2/

Answer 1

This will avoid issues if you have nested .TextCont elements. If that won’t happen, you can get rid of the not()^[docs] method.

var with_dividers = $('.TextCont:contains("--divider--")')
               .not('> .TextCont:contains("--divider--")');


with_dividers.html(function(i,htm) {
    return '<p>' + htm.split('--divider--').join('</p><p>') + '</p>';
});

Example: http://jsfiddle.net/CFLV4/

And I changed your IDs to classes since duplicate IDs are invalid.

---

Edit: To explain, in JavaScript, you don’t append opening and closing tags. You need to think in terms of dealing with whole elements.

In the code above, the html()^[docs] method is passed a function. The return value of the function is the new content of the element. The htm parameter is passed a String of the current content.

So what we do is take the existing content, and do a .split('--divider--'), resulting in an Array, like:

['<span>Lorem</span>',
  '<a href="#">ipsum</a>',
  'dolor sit amet.'
]

As you can see, the --divider-- text has been removed, and the string split where the --divider-- was.

Then we do a .join() on the Array, using '</p><p>' as the join text, giving us:

'<span>Lorem</span></p><p><a href="#">ipsum</a></p><p>dolor sit amet.'

…but of course we’re missing our opening and closing tags, so we add those to the beginning and end, so our code:

'<p>' + htm.split('--divider--').join('</p><p>') + '</p>'

…ultimately gives us:

'<p><span>Lorem</span></p><p><a href="#">ipsum</a></p><p>dolor sit amet.</p>'

That is the return value of the function, and therefore becomes the new content.