Infix to Postfix Converter using JavaScript - GeeksforGeeks

05 Jul, 2021
Postfix expressions are easier for a compiler to understand and evaluate. So this is a converter that converts infix expression to postfix expression using JavaScript.
Pre-requisites:
Stack operation
Infix to Postfix conversion
Basic JavaScript
Approach:
Button Convert call function InfixtoPostfix() and this function converts the given infix expression using JavaScript.
Display the Postfix expression.
HTML code:
HTML
<!DOCTYPE html><html lang="en"> <head>     <!-- link script.js file -->    <script type="text/javascript" src="script.js"></script>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"        rel="stylesheet"        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"        crossorigin="anonymous">     <!-- Infix to Postfix & Prefix Converter title added  -->    <title>Infix to Postfix & Prefix Converter</title>     <!-- link style.css file -->    <link href="infix.css" rel="stylesheet"></head> <body>    <nav class="navbar navbar-light bg-light">        <div class="container-fluid"            style="justify-content: center;">            <span class="navbar-brand mb-0 h1">                Infix to Postfix Converter in JavaScript            </span>        </div>    </nav>    <div class="inputdata">         <!-- Taking infix expression as input -->        <span class="span1">            Enter Valid Infix Expression        </span>        <br>        <input type="text" placeholder="Infix Expression"            id="infixvalue" class="input1">        <br>         <!-- InfixtoPostfix() function call-->        <button onclick="InfixtoPostfix()" class="btn1">            Convert</button>    </div>    <br>    <div class="output">         <!-- Postfix expression printed -->        <span style="font-size:1.4vw;  font-size: 2.2vw;">            Postfix Expression:-            <span id="text"                style="color: black; font-weight: 600;">            </span>        </span>    </div></body> </html>
CSS code: The following code is the content for “infix.css” file used in the above HTML code.
CSS
body {    background-color: #fff0c3;} .container-fluid {    background-color: #6f459e;    justify-content: center;} .navbar-brand mb-0 h1 {    color: black; } .navbar-light .navbar-brand {    color: white;} .navbar navbar-light bg-light {    width: 100%; } .navbar {    padding: 0%;} .navbar-brand {    font-size: 1.8rem;} .navbar-light .navbar-brand:hover {    color: white;} .inputdata {    text-align: center;    margin-top: 21vh;} .span1 {    font-size: 2vw;    font-weight: 500;    color: black;} .input1 {    width: 58vw;    text-align: center;    height: 3vw;    place-items: center;    font-size: 20px;    border: 2px solid white;    border-radius: 18px;    margin-top: 2vw;} .btn1 {    border: wheat;    background-color: #6f459e;    text-align: center;    color: white;    font-weight: 500;    border-radius: 8px;    margin-top: 1.5vw;    width: 7vw;    height: 6vh;} button:hover {    background-color: #c694ff;} input:focus {    outline: none;} .output {    text-align: center;}
JavaScript code: The following code is the content for the file “script.js” used in the above HTML code.
Javascript
// Created an empty arrayvar stackarr = []; // Variable topp initialized with -1var topp = -1; // Push function for pushing// elements inside stackfunction push(e) {    topp++;    stackarr[topp] = e;} // Pop function for returning top elementfunction pop() {    if (topp == -1)        return 0;    else {        var popped_ele = stackarr[topp];        topp--;        return popped_ele;    }} // Function to check whether the passed// character is operator or notfunction operator(op) {    if (op == '+' || op == '-' ||        op == '^' || op == '*' ||        op == '/' || op == '(' ||        op == ')') {        return true;    }    else        return false;} // Function to return the precedency of operatorfunction precedency(pre) {    if (pre == '@' || pre == '(' || pre == ')') {        return 1;    }    else if (pre == '+' || pre == '-') {        return 2;    }    else if (pre == '/' || pre == '*') {        return 3;    }    else if (pre == '^') {        return 4;    }    else        return 0;} // Function to convert Infix to Postfixfunction InfixtoPostfix() {     // Postfix array created    var postfix = [];    var temp = 0;    push('@');    infixval = document.getElementById("infixvalue").value;     // Iterate on infix string    for (var i = 0; i < infixval.length; i++) {        var el = infixval[i];         // Checking whether operator or not        if (operator(el)) {            if (el == ')') {                while (stackarr[topp] != "(") {                    postfix[temp++] = pop();                }                pop();            }             // Checking whether el is (  or not            else if (el == '(') {                push(el);            }             // Comparing precedency of el and            // stackarr[topp]            else if (precedency(el) > precedency(stackarr[topp])) {                push(el);            }            else {                while (precedency(el) <=                    precedency(stackarr[topp]) && topp > -1) {                    postfix[temp++] = pop();                }                push(el);            }        }        else {            postfix[temp++] = el;        }    }     // Adding character until stackarr[topp] is @    while (stackarr[topp] != '@') {        postfix[temp++] = pop();    }     // String to store postfix expression    var st = "";    for (var i = 0; i < postfix.length; i++)        st += postfix[i];     // To print postfix expression in HTML    document.getElementById("text").innerHTML = st;}
Output:
surindertarika1234
CSS-Questions
HTML-Questions
HTML-Tags
JavaScript-Methods
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)