Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change string to be displayed as a subscript using JavaScript?
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.
Syntax
We can follow the below syntax to use the <sub>tag.
<p> A <sub> start </sub> </p> // output is Astart
Example
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.
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 <sub> 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.
2K+ Views
