Find and alter links with js in a text

Question

I have a text that must be send as an email. But to give the mail its layout we need to add some style. What we must do is the following: 1 find in a text one or more links with this format

<a href="RANDOM URL HERE">RANDOM TEXT</a>

2 change the links into this format:

<a href="RANDOM URL HERE" style="color: #FFFFFF; text-decoration: none;"><span style="color: #FFFFFF;">RANDOM TEXT</span></a>

I have no idea how i can best do this, with regex or with DOM,...

Many thanks!

Why insert a span, when you already modify the style in a tag? — nhahtdh
– nhahtdh, Commented Apr 19, 2013 at 9:27
because some mail clients only look at the '<span>' tag, and some only look at the style in the '<a>' tag — Dorgaldir
– Dorgaldir, Commented Apr 19, 2013 at 9:55

Community · Accepted Answer · 2017-05-23 11:57:18Z

1

First of all, you should consider never using regex for working with HTML/XML markup. You can read the reason here: https://stackoverflow.com/a/1732454/1249581 :)

Then, in order to answer the question you should do the following:

var div = document.createElement("div"),
    links;

div.innerHTML = textOfYourEmail;
links = div.getElementsByTagName("a");

for (var i = links.length; i--;) {
    var link = links[i],
        span = document.createElement("span");

    link.style.textDecoration = "none";
    link.style.color = "#fff";
    span.style.color = "#fff";

    while (link.firstChild) {
        span.appendChild(link.firstChild);
    }
    link.appendChild(span);
}

textOfYourEmail = div.innerHTML;

It uses embedded methods for DOM manipulation. It is fast and reliable.

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Apr 19, 2013 at 9:34

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

Comments

Casimir et Hippolyte · Accepted Answer · 2013-04-19 09:29:01Z

0

In my opinion, the best way to do that is to create a css class and add it to your links. You do not need to add span tags! Using the DOM is the best way.

answered Apr 19, 2013 at 9:29

Casimir et Hippolyte

90k5 gold badges102 silver badges131 bronze badges

1 Comment

Dorgaldir Over a year ago

But it is for a text that will be used as an email, and email does not use css classes, it has to be inline

Collectives™ on Stack Overflow

Find and alter links with js in a text

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related