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 < > es 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!

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 < > es 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!

• javascript
• regex

• 2 Do not parse HTML with regular expressions. Use a HTML parser. – Chris Hasiński Commented Oct 31, 2012 at 7:46
• @Krzysztof Hasiński its a string stored in variable text – super Commented Oct 31, 2012 at 7:50
• 2 @bios ...which contains html. Jquery would do this awesomely, if it's an acceptable solution. – Jan Commented Oct 31, 2012 at 7:50
• 1 stackoverflow./questions/1732348/… – maxwell Commented Oct 31, 2012 at 7:50
• @ Jan please give me some examples or links to refer – super Commented Oct 31, 2012 at 7:52

4 Answers 4

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./jquery/#jQuery2
http://api.jquery./each/
http://api.jquery./find/
http://api.jquery./html/

In pure JS it will be something like this:

var elements = document.getElementsByClassName('replace');
var replaceTag = document.createElement('replacetext');
for (var i = elements.length - 1; i >= 0; i--) {
    var e = elements[i];
    e.parentNode.replaceChild(replaceTag, e);
};​

Here is one crazy regex which matches what you want:

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

var r = /(<(div|DIV)\s+class\s*?=('|")\s*?replace('|")\s*?>)(\s*?&lt;)(.*?)(&gt;\s*?)(<\/(div|DIV)\s*?>)/g;

The whole replacement can be made with:

text.replace(r, function () {
         return 'Hello' + arguments[6] + 'Hello';
    });

Please let me know if there are issues with the solution :).

Btw: I'm totally against regexes like the one in the answer...If you have made it with that plex regex there's probably better way to handle the problem...

Consider using the DOM instead; you already have the structure you want, so swap out the node itself (borrowing heavily from @maxwell's code, but moving children around as well):

var elements = document.getElementsByClassName('replace');
for(var i = elements.length-1; i>= 0; --i) {
    var element = elements[i];
    var newElement = document.createElement('replacetext');
    var children = element.childNodes;
    for(var ch = 0; ch < children.length; ++i) {
        var child = children[ch];
        element.removeChild(child);
        newElement.appendChild(child);
    }
    element.parentNode.insertBefore(newElement,element);
    element.parentNode.removeChild(element);
}

For each element of the given class, then, it will move each of its children over to the new element before using that element's position to insert the new element and finally removing itself.

My only questionmark is whether the modification of items in the array return by getElementByClassName will cause problems; it might need an extra check to see if the element is valid before processing it, or you may prefer to write this as a recursive function and process the tree from deepest node first.

It may seem like more work, but this should be faster (no re-parsing of the html after you've changed it, element moves are just reference value assignments) and much more robust. Attempting to parsing HTML may damage your health.

Rereading the question (always a good plan), you begin with the text in a string. If that is truly the start point (i.e. you're not just pulling that out of an innerHTML value), then to use the above just create a temporary parent element:

var fosterer = document.createElement('div');
fosterer.innerHTML = text; // your variable from the question

And then proceed using fosterer.getElementsByClassName.