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

Front End Technology Javascript Web Development

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, A², B², 10⁵, etc. Also, we can use the superscript to show the chemical formulas such as O₂²-, 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 tag. Whatever string the user writes inside the HTML  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)²

Example

In the below example, we have used the HTML 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  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 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 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  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 tag.