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

Front End Technology Javascript Web 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, H₂, N₂, O₂, etc. Also, we can use it in mathematics to show the symbols such as X₂, A₂, 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 tag. Whatever string the programmer puts inside the , it displays as the subscript string.

Syntax

We can follow the below syntax to use the tag.

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

Example

In the below example, we have used HTML tag to render some mathematical and chemical formulas. This example is only for the demonstration purpose of 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 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.

Syntax

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 HTML tag.

<sub> string <sub>

Example

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.