How to add HTML tag for a specific part of the string (javascript)

Question

Please note that this question already has an answer here but the answer is provided in jQuery, I need similar thing to be done with vanilla javascript.

Here's my issue in detail. I have a price string to display in a page which will be in html as 60.00 I want to transform the string into something like this 60,00.

Here's the code I have tried.

  let value = "60.00";
  value = value.replace(".", ",");
  let values = value.split(',');
  var tag = document.createElement("sup");
  var text = document.createTextNode(values[1]);
  text = tag.appendChild(text);
  let text1 = JSON.stringify(text);
  alert(values[0]+text1);

If I run this code I get 60{} as an output. 60,⁰⁰ this is the desired output.

Please don't modify your question in a way it invalidates valid answers. You should ask a new question. — Thomas Sablik
– Thomas Sablik, Commented Sep 16, 2021 at 7:12

score 2 · Accepted Answer · 2021-09-16 07:37:52Z

2

You're almost there with your current code but you're concatenating objects and strings. That doesn't work. You have to fill the elements one by one or convert the HTML elements to strings with .outerHTML:

let value = "60.00";
value = value.replace(".", ",");
let values = value.split(',');
var tag = document.createElement("sup");
var text = document.createTextNode(values[1]);
tag.appendChild(text);
document.getElementById('output').innerHTML = values[0];
document.getElementById('output').appendChild(tag);
alert(values[0] + tag.outerHTML);

<div id="output"></div>

edited Sep 16, 2021 at 7:37

answered Sep 16, 2021 at 7:08

user16540390

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

7 Comments

Viira Over a year ago

I can't use innerHTML I'm using angular

user16540390 Over a year ago

@Viira Why can't you use innerHTML with Angular?

Viira Over a year ago

I'm using pipe {{foodItems.original_price | replace}} I can't use pipes inside innerHTML

user16540390 Over a year ago

@Viira I edited my answer to create a HTML string. But you should know that Angular sanitizes HTML in strings. You can solve it with  or by using DomSanitizer

Viira Over a year ago

This solves my problem. Thanks

|

ahsan · Accepted Answer · 2021-09-16 06:48:59Z

1

Instead of adding a sup tag, why not add the string  instead?

let span = document.querySelector("span");
let value = span.innerHTML;

const sup = `<sup>${value.split('.')[1]}</sup>`;
value = `${value.split('.')[0]},${sup}`;

span.innerHTML = value;

<span>60.00</span>

answered Sep 16, 2021 at 6:48

ahsan

1,50411 silver badges12 bronze badges

11 Comments

Viira Over a year ago

I have multiple span tags running on the page, it's a cart page. can we find the relative parent ?

Viira Over a year ago

I have tried your answer it works but it outputs as a string like this 60,00

Muhammad Afnan Over a year ago

you can give class to the spans you want to change

Viira Over a year ago

How can I add class names for elements that are generating dynamically from a foreach loop

Viira Over a year ago

Thank you for your effort. I appreciate it.

|

Muhammad Afnan · Accepted Answer · 2021-09-16 07:03:27Z

0

let span = document.querySelector("span");
let value = span.innerHTML;

const sup = `<sup>${value.split('.')[1]}</sup>`;
value = `${value.split('.')[0]}.${sup}`;

span.innerHTML = value;

<span>10.00</span>

answered Sep 16, 2021 at 7:03

Muhammad Afnan

691 silver badge8 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to add HTML tag for a specific part of the string (javascript)

3 Answers 3

7 Comments

11 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related