How to concatenate string within class name syntax in JavaScript?

Question

I have a huge string like this:

'<i class=""></i>'

I have a variable called icon. I need to place icon in between the two quotes. Although it feels simple, I've been struggling to wrap my head around it. Can someone please help? JS newbie here.

Sorry, inside the class, its a font-awesome icon. It'll be something like "fa fa-building" — Di437
– Di437, Commented Jul 10, 2018 at 6:02
<i class=""></i>'.replace('""', '"' + icon + '"') might do the job. — RobG
– RobG, Commented Jul 10, 2018 at 6:16

CertainPerformance · Accepted Answer · 2018-07-10 06:08:44Z

5

The delimiters of your string are ', so just end the ', concatenate the icon, and resume the ':

const icon = 'myIcon';
const str = '<i class="' + icon + '"></i>';
console.log(str);

But you might find it more readable to use a template literal instead, especially if you're building an HTML string, or if it's multi-line, or if you're having any issues with escape characters: begin and end the string with backticks, and insert variables by putting them inside of ${varNameHere}:

const icon = 'myIcon';
const icon2 = 'myIcon2';
const icon3 = 'myIcon3';
const str = `
<i class="${icon}"></i>
<i class="${icon2}"></i>
<i class="${icon3}"></i>
`;
console.log(str);

edited Jul 10, 2018 at 6:08

answered Jul 10, 2018 at 6:00

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

Di437 Over a year ago

Oh neat, this worked! I did NOT know about template literals! That can solve so many of my previous problems! Thank you!

Ramanand Sirvi · Accepted Answer · 2018-07-10 16:47:17Z

0

You can split it using .split() function.

  const icon = 'Idk'
  var str = '<i class = "">';
  var strSplit = str.split('"');
  var addString = strSplit[0] + '"' + icon + '"' + strSplit[2];
  console.log(addString);

The array strSplit contains ['<i class = ','','>']

edited Jul 10, 2018 at 16:47

answered Jul 10, 2018 at 6:12

Ramanand Sirvi

6787 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to concatenate string within class name syntax in JavaScript?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related