CODEWITHSUNDEEP
javascriptjquery
amexn
amexn

Reputation: 2218

How to find and replace begin tag and end tags in an html string using javascript/jquery

How to find and replace begin tag and end tags in an html string using javascript/jquery

for example

var myString = "<span> Hello john</span><div> John likes to play guitar </div> <div style="color:Blue;font-weight:bold" class='quotes'>Anna likes to arrange flowers
        </div>";

I need to find the "div" tag and replace with other html tag like "p" tag/ "span" tag

Resulting html string after replace "div" tag to "p" tag 

var replacestring="<span> Hello john</span><p> John likes to play guitar </p> <p style="color:Blue;font-weight:bold" class='quotes'>Anna  likes to arrange flowers
            </p>";

Please suggest any solution.

Upvotes: 8

Views: 6886

Answers (3)

Baz1nga
Baz1nga

Reputation: 15579

Trying something with jQuery, however, I am not sure if it is any better than what alex suggested. 

var $replaceString=$(replaceString);

$("div",$replaceString).each(
    function()
    {
        var $p=$(document.createElement('p')).html($(this).html());
        //add code to add any attribute that you want to be copied over.
        $(this).after($p);
        $(this).remove();
    }
);

Upvotes: 0

scessor
scessor

Reputation: 16125

Javascript with regular expression:

myString = myString.replace(/<(\/)?div[^>]*>/g, '<$1p>');

Also see my jsfiddle.

=== UPDATE ===

myString = myString.replace(/<(\/)?div([^>]*)>/g, '<$1p$2>');

jsfiddle 2.

Upvotes: 5

alex
alex

Reputation: 490453

myString = $('<div />').html(myString).find('div').replaceWith(function() {
    var p = $('<p />');
    p.html($(this).html());
    $.each(this.attributes, function(index, attr) {
        p.attr(attr.name, attr.value);  
    });
    return p;
}).end().html();

jsFiddle.

Upvotes: 4

Related Questions