CODEWITHSUNDEEP
jquery
alias51
alias51

Reputation: 8608

How to select matching text in a string and replace it using jQuery/JS

I have various {{ context }} in an html doc:

<p>Lorem ipsum dolor sit amet, {{ context_1  }} consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. {{ context_2 }} Ut enim ad minim veniam.<p>

How can I add a <span> class around all the variables in curly brackets to give

<p>Lorem ipsum dolor sit amet, <span>{{ context_1 }}</span> consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. <span>{{ context_2 }}</span> Ut enim ad minim veniam.<p>

Upvotes: 0

Views: 28

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

You can use the overload of .replace (MDN) to specify a regular expression.

Combine with .html() to get and set the html.

There are various different ways to use replace with a regex, here's a couple:

.replace(/{{.*}}/g, "<span>$&</span>")
.replace(/({{.*}})/g, "<span>$1</span>")
.replace(/{{(.*)}}/g, "<span>$1</span>")  //if you also want to remove the `{{}}`


$("p").html((i, html) => {
  return html.replace(/({{.*}})/g, "<span>$1</span>")
});
p>span { color: pink }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, {{ context_1  }} consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. {{ context_2 }} Ut enim ad minim veniam.</p>
<p>Lorem ipsum dolor sit amet, {{ context_1  }} consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. {{ context_2 }} Ut enim ad minim veniam.</p>

Upvotes: 1

Related Questions