How to change string to be displayed as a subscript using JavaScript?

Front End TechnologyJavascriptWeb Development

In this tutorial, we will learn to change the string displayed as a subscript using JavaScript. The meaning of the subscript string is a string that displays right after the string with a small letter and hangs below. For example, In the Astart, ‘start’ is the subscript string shown in the small letter right after A and hangs below.

The substring uses in many fields such as Mathematics, chemicals, etc. It is useful to represent the chemical name. For example, H2, N2, O2, etc. Also, we can use it in mathematics to show the symbols such as X2, A2, etc.

Here, we will learn to represent strings as subscripts using HTML and JavaScript both.

Display String as Subscript using HTML only

Before we display a string as a subscript using JavaScript, we should learn how we can render the subscript string using the Raw HTML. The HTML contains the <sub>tag. Whatever string the programmer puts inside the <sub>, it displays as the subscript string.


We can follow the below syntax to use the <sub>tag.

<p> A <sub> start </sub> </p> // output is Astart


In the below example, we have used HTML <sub> tag to render some mathematical and chemical formulas. This example is only for the demonstration purpose of <sub> tag.

<html> <head> </head> <body> <h2> displayed string as a subscript using JavaScript. </h2> <h4> Various examples of subscript string using Raw HTML. </h4> <p> A <sub> start </sub> </p> <p> X<sub>2 </sub> </p> <p> CO<sub>2 </sub> </p> <p> C<sub>12 </sub> H<sub>22 </sub> O<sub>11 </sub> </p> </body> </html>

In the output, users can see that how we have written the chemical formulas using the <sub>tag.

Display String as Subscript using HTML and JavaScript

We learned how to display a string as a subscript using the only HTML in the above section. We will use the JavaScript string.sub() method in this section. The string.sub() method also returns the raw HTML, which we can append to the body of the HTML.


let string = “24”;
let result = “x” + string.sub(); // convert string variable to subscript.
let result = “x” + “24”.sub(); // use direct string with sub() method 

Return values

The string.sub() method returns the string within the <sub> HTML tag.

<sub> string <sub>


In the below example, we have used the JavaScript sub() method to display the string as a subscript. We have created the various chemical formula using the sub() method and rendered them in the output.

<html> <head> </head> <body> <h2> Displayed string as a subscript using JavaScript. </h2> <div id = "subscript"> </div> <div id = "deprecated"> <br>The String sub() method is deprecated. So use sub tag. <br></div> </body> <script> var subscript = document.getElementById("subscript"); let string = "3"; let checmical_formula = "HCO" + string.sub(); var str = "<sub>Demo Text</sub>"; subscript.innerHTML = checmical_formula + "<br/>"; checmical_formula = "Cr" + "2".sub() + "O" + "7".sub()+ "<br/>"; subscript.innerHTML += checmical_formula; deprecated.innerHTML += "<br>This is subscript" + str; </script> </html>

Note − The string sub() method is deprecated so use the sub tag.

We have learned to render the string as subscript using JavaScript. It is useful when we need to write mathematics symbols, problems, chemical formulas, etc., to the webpage using HTML and JavaScript or only HTML.

Updated on 02-Aug-2022 11:32:20