How to change Html tags using jQuery (or anything else)?

Question

How to change:

<p class="myClass">Lorem Ipsum (and maybe other nested tags)</p>

into:

<code class="myClass">Lorem Ipsum (and maybe other nested tags)</code>

?

This is an offline job. It's just an update but there are thousands of ps that I need to change into codes.

Are you saying you want to permanently update your source html? Most IDEs will let you do a find and replace across all the files in a project, as will tools like Notepadd++. — nnnnnn
– nnnnnn, Commented Mar 20, 2012 at 11:44
Why do you need or plan to make these changes on line or even off line at the client side ..? — hornetbzz
– hornetbzz, Commented Mar 20, 2012 at 11:49
@nnnnnn Yes, it's a permanent update. Find-replace will find  and replace it with <code class="myClass">; but what about the ending  (obviously there are ending paragraphs that do't correspond to . — Yeseanul
– Yeseanul, Commented Mar 20, 2012 at 11:54
@hornetbzz It's a bug in iBooks that I need to overcome (the Html files will be the source for the ePubs). — Yeseanul
– Yeseanul, Commented Mar 20, 2012 at 11:56

Frédéric Hamidi · Accepted Answer · 2012-03-20 12:48:01Z

4

You can use contents() to obtain the element's children (including text nodes), then combine unwrap() and wrapAll():

$("p.myClass").contents().unwrap().wrapAll("<code class='myClass'></code>");

Update: If you have more than one  element, you have to iterate over them with each() to avoid reparenting all of them inside a single <code> element:

$("p.myClass").each(function() {
    $(this).contents().unwrap().wrapAll("<code class='myClass'></code>");
});

edited Mar 20, 2012 at 12:48

answered Mar 20, 2012 at 11:46

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yeseanul Over a year ago

Thanks for the reply. I'm not familiar with Jquery; I've just tried $(document).ready(function() { $("p.code").contents().unwrap().wrapAll("<code class='code'></code>"); }); but what it does is that it puts the text from all s into one single <code class="myClass">. In other words, it replaces the first occurrence of  ...  with <code class="myClass"> (the contents of all s that have a class="myClass") </class>.

Frédéric Hamidi Over a year ago

Yup, that will indeed happen if you have several  elements. The solution is to iterate over them, see my updated answer.

Collectives™ on Stack Overflow

How to change Html tags using jQuery (or anything else)?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related