I have an input box in which the user inputs a chemical formula. I am displaying their input back to them in a table, with the following code in my javascript file.

document.getElementById("entered").innerHTML = userIn;

...where "userIn" is the "id" of the input box, and "entered" is the id of the data in my table row.

Now, here's my question:

Is there any way I can change all of the numbers in the formula to subscripts, but leaving the letters unchanged? So if H2O2 is entered, only the 2's bee subscripted?

I have an input box in which the user inputs a chemical formula. I am displaying their input back to them in a table, with the following code in my javascript file.

document.getElementById("entered").innerHTML = userIn;

...where "userIn" is the "id" of the input box, and "entered" is the id of the data in my table row.

Now, here's my question:

Is there any way I can change all of the numbers in the formula to subscripts, but leaving the letters unchanged? So if H2O2 is entered, only the 2's bee subscripted?

• javascript
• html
• innerhtml
• subscript

2 Answers 2

Use a simple regex replace as given below

document.getElementById("entered").innerHTML = userIn.replace(/(\d+)/g, '<sub>$1</sub>');

Demo: Fiddle

You can use a regex to surround all of the digits in userIn with <sub></sub> tags. The following should work:

userIn.replace(/(\d+)/g, "<sub>$1</sub>");

The + in the regex will group a string of consecutive digits together and the tailing g in the regex says to replace all the strings of digits instead of just replacing the first string of digits in userIn.