Display numbers as subscript in selected items from v-select slot in vue js

Question

I use v-select in Vue project to select from Chemicals and oxides list, I want to display selected items with Subscript for numbers only like attached figure :

My code is :

<v-select v-model="elements" class="form-control text-left" :items="chemicals"></v-select>

chemicals :

["Ag","Al2O3","Al2O3/(CaO+MgO+K2O+Na2O)","As","Au","Ba","BaO","Be","Bi","Br","Ca","CaO","Cd","Ce","Cl","Cl","Co","CO2","Cr","Cr2O3","Cs","Cu","Dy","SO3","SO4","Sr","SrO","Ta","Tb","Th","Ti","TiO2","Tl",]

Answer 1

You could replace all the digits as individual subscript characters:

1. Create an array (e.g., named subscripts) of subscript Unicode characters (\u2080 for 0, through u2089 for 9). This enables mapping a given digit to a subscript character by using the digit as an index into the subscript array (i.e., subscripts[3] = '\u2083').

2. Use String.prototype.replace() with a replacer function that converts any digit to the subscript.

const subscripts = [
  '\u2080',
  '\u2081',
  '\u2082',
  '\u2083',
  '\u2084',
  '\u2085',
  '\u2086',
  '\u2087',
  '\u2088',
  '\u2089',
]

const ELEMENTS = ["Ag","Al2O3","Al2O3/(CaO+MgO+K2O+Na2O)","As","Au","Ba","BaO","Be","Bi","Br","Ca","CaO","Cd","Ce","Cl","Cl","Co","CO2","Cr","Cr2O3","Cs","Cu","Dy","SO3","SO4","Sr","SrO","Ta","Tb","Th","Ti","TiO2","Tl"]

const elements = ELEMENTS.map(name => {
  return name.replace(/\d/g, (num) => subscripts[Number(num)])
})

demo