Replacing a specific character with a html tag in jQuery

Question

I'm trying to style a specific word in a string by wrapping it in a <strong></strong> tag. The problem is that This word will change all the time, so I was thinking of getting them to wrap the particular word in brackets (in an input text field), and then replace the opening and closing brackets with the opening and closing strong tags.

Eg:

"Who said (romance) was dead?"

would become

"Who said <strong>romance</strong> was dead?"

What would be the best way to go about this?

Welcome to Stack Overflow! Please see How to Ask and minimal reproducible example. Add your attempts. — Tushar
– Tushar, Commented Feb 10, 2016 at 4:49
I was thinking that, but I don't know much about regular expressions. An example would be much appreciated. — Luke Thornton
– Luke Thornton, Commented Feb 10, 2016 at 4:49

Pranav C Balan · Accepted Answer · 2016-02-10 05:11:42Z

1

You can use replace() with capturing group regex

console.log(
  "Who said (romance) was dead?".replace(/\(([^)]+)\)/g, '<strong>$1</strong>')
);

/\(([^)]+)\)/g

Above regex will match all the string in between ( and ) and repcace the captured group data surround with <strong> tag.

Regex explanation here

Regular expression visualization

edited Feb 10, 2016 at 5:11

answered Feb 10, 2016 at 4:49

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

1 Comment

Luke Thornton Over a year ago

Thanks, this helped a lot. I ended up using:

var slideHeading = $(".slide-heading").text();     $(".slide-heading").html(slideHeading.replace(/\(([^)]+)\)/g, '<strong>$1</strong>'));

which did the trick!

gurvinder372 · Accepted Answer · 2016-02-10 04:50:59Z

0

if an answer without regex is acceptable to you then try :)

var str = "Who said (romance) was dead?";

var wordToBeStronged = "romance";

str = str.split( "(" + wordToBeStronged + ")" ).join( "<strong>" + wordToBeStronged + "</strong>" );

console.log( str );

answered Feb 10, 2016 at 4:50

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

Tushar Over a year ago

split and join will be slower than RegEx.

gurvinder372 Over a year ago

@Tushar you are correct about performance jsperf.com/split-and-join-vs-regex-1000/2 , but its not too bad actually. In fact regex is slower with bigger strings jsperf.com/split-and-join-vs-regex-1000/3

Collectives™ on Stack Overflow

Replacing a specific character with a html tag in jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related