Question

var text='<div id="main"><div class="replace">&lt; **My Text** &gt;</div><div>Test</div></div>'

I want to replace div with class=”replace” and html entities < > comes inside that div with some other text.

I.e the output :

'<div id="main"> Hello **My Text** Hello <div>Test</div> </div>'

I’ve tried

var div = new RegExp('<[//]{0,1}(div|DIV)[^><]*>', 'g');
text = text.replace(div, "Hello");

but this will replace all div.

Any help gratefully received!

Answer 1

If a Jquery solution is acceptable:

text = $(text) // Convert HTML string to Jquery object
         .wrap("<div />") // Wrap in a container element to make...
         .parent()        // the whole element searchable
         .find("div.replace") // Find <div class="replace" />
           .each(function()   // Iterate over each div.replace
           {
             $(this)
               .replaceWith($(this).html() // Replace div with content
                .replace("&lt;", "<sometext>")
                .replace("&gt;", "</sometext>")); // Replace text
           })
         .end().html(); // return html of $(text)

This sets text to:

<div id="main"><sometext> My Text </sometext><div>Test</div></div>

And to replace it back again:

text = text.replace('<sometext>', '<div class="replace">&lt;')
           .replace('</sometext>', '&gt;</div>');

http://api.jquery.com/jquery/#jQuery2
http://api.jquery.com/each/
http://api.jquery.com/find/
http://api.jquery.com/html/