Modify html content using JQuery by style tag

Question

I am trying to edit html content based on style tags

Here is the section of html:

<!DOCTYPE html>
<html>
  <body>
    <span style="color:restest">Testing</span>
    <br>
    <span style="color:restest">Testing Again</span>
  </body>
</html>

I want to modify all instances of spans with style="color:restest" and add html tags to the contents.

They should become something like:

<a href="example.com/testing">Testing</a>
<a href="example.com/testing_again">Testing_Again</a>

Possibly duplicate with stackoverflow.com/questions/3841850/… — Kleioz
– Kleioz, Commented Dec 5, 2017 at 16:36

Olian04 · Accepted Answer · 2017-12-05 17:01:14Z

2

The easiest way to do this would be with jQuery#replaceWith:

$('span[style="color:restest"]').each((i,e) => {
  $(e).replaceWith(`<a href="example.com/${e.innerHTML}">${e.innerHTML}</a>`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span style="color:restest">Testing</span>
<span style="color:restest">Testing Again</span>

edited Dec 5, 2017 at 17:01

answered Dec 5, 2017 at 16:40

Olian04

6,9002 gold badges31 silver badges56 bronze badges

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

4 Comments

Seth McClaine Over a year ago

Why are you using document.querySelectorAll instead of $('span[style="color:restest"]')

Olian04 Over a year ago

@SethMcClaine reason being that i prefer vanilla js over jquery whenever i can use it. However i see your point and i have updated the answer.

Seth McClaine Over a year ago

I agree, but tend to try to stick with one tech instead of jumping back and forth. Gave you an up though :-)

Bill Shoener Over a year ago

This is perfect! Thanks for the help!

Collectives™ on Stack Overflow

Modify html content using JQuery by style tag

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related