how to wrap javascript string with tag in another tag by regex?

Question

I have string with link

<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Twitter/</a>

and I need to wrap a text inside link in a <span> element

like :

<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"><span style="color: white">Twitter</span>/</a>

so what regex i need ? ps. i need to send this string as part of html mail letter from mongodb via nodejs, not for manipulate DOM

Why don't you make use of the DOM for this or a parser instead of a regex? — The fourth bird
– The fourth bird, Commented Dec 13, 2022 at 17:43
it's not about layout or dom, it's about sending this string from mongodb via nodejs in html letter — Mithra
– Mithra, Commented Dec 13, 2022 at 17:50
If it is via nodejs, I think you can use a DOMParser with node js — The fourth bird
– The fourth bird, Commented Dec 13, 2022 at 17:51
You can use DOM methods, then get the outerHTML to convert it to a string for sending email. — Barmar
– Barmar, Commented Dec 13, 2022 at 18:11

Peter Thoeny · Accepted Answer · 2022-12-13 19:05:27Z

It's safest to use a DOMParser with node.js as "The fourth bird" mentioned: Trying to use the DOMParser with node js

You can use a regex, which might not cover all corner cases. Here are two options:

const input = '<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Twitter/</a>';

let regex1 = /(<a [^>]*>)(.*?)(<\/a>)/gi;
let result1 = input.replace(regex1, '$1<span style="color: white">$2</span>$3');
console.log('result1:', result1);

let regex2 = /(?<=<a [^>]*>)(.*?)(?=<\/a>)/gi;
let result2 = input.replace(regex2, '<span style="color: white">$1</span>');
console.log('result2:', result2);

Output:

result1: <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"><span style="color: white">Twitter/</span></a>
result2: <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"><span style="color: white">Twitter/</span></a>

Explanation of regex1:

(<a [^>]*>) -- capture group 1: anchor tag
(.*?) -- capture group 2: non-greedy scan
(<\/a>) -- capture group 3: anchor end tag
in replacement part use captured groups $1, $2, $3

Explanation of regex2:

similar to regex1, but using a positive lookbehind instead of capture group 1, and a positive lookahead instead of capture group 2 (this is not supported by all JavaScript engines)

Ronnie Smith · Accepted Answer · 2022-12-13 19:13:06Z

0

Using jsdom

var anchor = document.querySelector("a");
var anchorText = anchor.textContent;

anchor.innerText = "";
var span = document.createElement("span");
var spanText = document.createTextNode(anchorText);
span.appendChild(spanText)
anchor.appendChild(span);

console.log(anchor.innerHTML);

<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Twitter/</a>

edited Dec 13, 2022 at 19:13

answered Dec 13, 2022 at 17:52

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

1 Comment

Peter Thoeny Over a year ago

The OP states node.js, not browser environment

Rohìt Jíndal · Accepted Answer · 2022-12-16 09:40:51Z

0

We can also achieve this requirement by simply using String.replace() method.

Live Demo :

var anchor = document.querySelector("a");
var anchorText = anchor.textContent;

anchor.innerHTML = anchorText.replace(anchorText, `<span style="color: red">${anchorText}</span>`)

<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Twitter/</a>

answered Dec 16, 2022 at 9:40

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

how to wrap javascript string with tag in another tag by regex?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related