Reduce text inside a button HTML / CSS

Question

In my Javascript I receive a string of 16 characters:

0x67D77Ed8323bF9dA59addF3E34ccC6433c7f3B76

I show this as a button's value, however I would like to show only the first 3-4 digits and the last 2-3 with the dots in the middle, how can I do this?

Example:

0x67D77Ed8323bF9dA59addF3E34ccC6433c7f3B76
-> 0x67D ... 3B76

Answer 1

You can use slice method to slice the string and then you can use anywhere you want.

const btn = document.querySelector("button");
const str = "0x67D77Ed8323bF9dA59addF3E34ccC6433c7f3B76";
const result = `${str.slice(0, 5)}...${str.slice(str.length - 4)}`;
console.log(result);

btn.textContent = result;

<button></button>