Regex: How to replace the matched text with a HTML element in JavaScript? [duplicate]

Question

I have a description from database coming like this :

"And here is the {{dog}} which is chasing the {{cat}}"

And instead of having {{dog}} I want to replace it by <span class="dog"/>

I tried this : My Attempt

I know how I can exctract but I don't know how to replace these parts only and then do my display.

Thanks you!

EDIT :

var input = "And here is the {{dog}} which is chasing the {{cat}}";
var regex = /{{(.*?)}}/g;

var matches, output = [];
while (matches = regex.exec(input)) {
    output.push(matches[1]);

}

I want my final string to be : And here is the <span class="dog"/> which is chasing the <span class='cat'/>

This is displaying an image! Sorry for syntax, I'm using React that's why I wrote <span class="dog"/>. I just chose span but it would be an image or whatever. — Zeyukan Ich'
– Zeyukan Ich', Commented Feb 5, 2019 at 15:08
"I tried this : My Attempt" The way SO works, your whole question (including any necessary code) has to be in your question, not just linked. Two reasons: People shouldn't have to go off-site to help you; and links rot, making the question and its answers useless to people in the future. Please put a minimal reproducible example in the question. More: How do I ask a good question? and Something in my web site or project doesn't work. Can I just paste a link to it? — T.J. Crowder
– T.J. Crowder, Commented Feb 5, 2019 at 15:10

adiga · Accepted Answer · 2019-02-05 15:17:36Z

4

You could use a capturing group like this:

$1 indicates the text matched within the parentheses (capturing group) and can be used in replace (MDN)

const str = "And here is the {{dog}} which is chasing the {{cat}}"
const newStr = str.replace(/{{(\w+)}}/g, "<span class='$1' />")

console.log(newStr)

edited Feb 5, 2019 at 15:17

answered Feb 5, 2019 at 15:08

adiga

35.4k9 gold badges66 silver badges88 bronze badges

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

Comments

kemicofa · Accepted Answer · 2019-02-05 15:10:24Z

1

Use regex to replace and capture the text you wish.

const data = "And here is the {{dog}} which is chasing the {{cat}}";

const res = data.replace(/\{{2}([a-z]+)\}{2}/g, '<span class="$1">$1</span>');

document.body.innerHTML = res;

span {
  background-color: blue;
  color: white;
}

answered Feb 5, 2019 at 15:10

kemicofa

17.7k10 gold badges93 silver badges145 bronze badges

Collectives™ on Stack Overflow

Regex: How to replace the matched text with a HTML element in JavaScript? [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related