I have a dynamic value let say
var x= "123456789"; now I want to apply the bold css property to last three no i.e 789 in above string. I tried by breaking the string to array, I was successful to some extent but then I struck on how should I show remaining no i.e unchanged part i.e. 123456.
Please guide me how can I approach to this or what's the best solution for this.
Output should be like 123456789. This string can be dynamic.
let str = "12345678" //Given string
str.slice(-3) //Will give you "678"
str.slice(0, str.length - 3) //Will give you "12345" - i.e. Everything except the last 3 characters.
So if after you have done the first operation the "678" is showed twice (In regular and bold) then apply the second operation to slice the "678" from the string. Hope it helps if not you can add your code and i can show you again.
let num = "123456789";
num = `${num.slice(0, -3)}<b>${num.slice(-3)}</b>`; // Will give you string: "123456<b>789</b>"
So you can use the slice function and use string interpolation to enter the bold tags. This would make the last 3 characters of the string bold.
You can try this:
<html>
<body>
<p id = "p1"> </p>
<script>
var x = "123456789";
var last3 = x.substr(-3,3); //last 3 digits
var newx = x.replace(last3, last3.bold()); //new string by replacing last 3 digits with bold
document.getElementById("p1").innerHTML = newx;
</script>
</body>
</html>
just improved a little
<div id= "display"></div>
<script>
let x = "12345678";
let second = str.slice(-3); // last 3
let first = str.slice(0, str.length - 3); // first part
// getting the display div
const display = document.querySelector("#display");
//inserting to display div
display.innerHTML = `${first}<strong>${second}</strong>`;
</script>
