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 superscript using JavaScript?
In this tutorial, we are going to learn to change strings to be displayed as a superscript using JavaScript. As the name suggests, the superscript string is displayed at the half-height of the normal string. Also, characters of the superscript string are smaller than the normal string characters.
There are a lot of uses of the superscript string while writing the mathematical formulas. For example, A2, B2, 105, etc. Also, we can use the superscript to show the chemical formulas such as O22-, H-, etc.
Here, using HTML or JavaScript, users can learn to display string as a superscript.
Display string as subscript using HTML only
In this section, we will learn to display a string as a superscript using the HTML <sup> tag. Whatever string the user writes inside the HTML <sup> tag will display at the half-height above the normal string with small characters.
Syntax
Users can follow the below syntax to render string as a superscript using the HTML only.
<p> (10)<sup> 2</sup> </p> // output is (10)2
Example
In the below example, we have used the HTML <sup> tag to render some mathematical formulas in the proper format.
<html> <head> </head> <body> <h2> displayed string as a superscript using JavaScript. </h2> <h4> Various examples of superscript string using Row HTML. </h4> <p> A<sup>3 </sup> </p> <p> A<sup>2 </sup> + B<sup>2 </sup> + 2*A*B = (A+B)<sup>2 </sup> </p> </body> </html>
In the above output, users can see how we have written mathematical formulas using HTML <sup> tag.
Display String as subscript using HTML and JavaScript
Here, we will learn about the JavaScript string.sup() method. It is a built-in library method that returns the string embedding into the HTML <sup> tag. So, users can use the above approach when they directly need to write a string using HTML, and when they need to generate a string using JavaScript and write it in the body of HTML, users can use the string.sup() method.
Syntax
Users can follow the syntax below to use the JavaScript string.sup() method.
let str = "5"; let output = "10" + string.sup(); // returns 105 let output = "x" + "2".sup(); // returns x2
Return values
The string.sup() method returns the string within the <sup> HTML tag.
<sup> string <sup>
Example
<html> <head> </head> <body> <h2> displayed string as a superscript using JavaScript. </h2> <div id = "superscript"> </div> <div id = "deprecated"> <br>The String sup() method is deprecated. So use <i>sup</i> tag. <br></div> </body> <script> var superscript = document.getElementById("superscript"); let string = "5"; let x = 10; let result = x + string.sup() + " = " + Math.pow( 10, 5 ) + ". <br/>"; superscript.innerHTML = result; result += "5" + "2".sup() + " = " + Math.pow( 5, 2 ) + ". <br/>"; superscript.innerHTML = result; var str = "<sup>Demo Text</sup>"; deprecated.innerHTML += "<br>This is subscript" + str; </script> </html>
In this tutorial, we have learned to render string as a superscript. It is a very useful feature provided by HTML. Either the user directly displays the string as a superscript using HTML <sup> tag or using the JavaScript string.sup() method, it doesn’t matter because the sup() method also returns the same value by embedding string to <sup> tag.
2K+ Views
