Is it possible to apply styles only to numbers, without wrapping numbers in a tag?

Question

css

Hello!
In a react application, a string is passed from an object

const obj = { data: ' 100 порций 5 мышей в подарок заказчик доволен' }

and rendered in the child component.
The goal is to make the numbers bold and leave the text normal.
Can we apply styles only to numbers, without wrapping the number in a tag?
Or is it possible to somehow set the string in the object? =)

const obj = { data: '<b>100</b> порций, <b>5</b> мышей в подарок заказчик доволен' }

Answer 1

Mess with the font.
This is how you can apply a different font only to numeric characters

@font-face {
    font-family: 'drevodel_regular';
         url('fonts/drevodel_regular.woff2') format('woff2'),
         url('fonts/drevodel_regular.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
    unicode-range: U+30-39;
}

Does not work with fonts connected via Google fonts, local connection required.

Answer 2

Write a function that, before rendering, iterates over the string and wraps all the numbers in a tag .