Open In App

Infix to Postfix Converter using JavaScript

Last Updated : 05 Jul, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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:

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=
        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 array
var stackarr = [];
 
// Variable topp initialized with -1
var topp = -1;
 
// Push function for pushing
// elements inside stack
function push(e) {
    topp++;
    stackarr[topp] = e;
}
 
// Pop function for returning top element
function 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 not
function operator(op) {
    if (op == '+' || op == '-' ||
        op == '^' || op == '*' ||
        op == '/' || op == '(' ||
        op == ')') {
        return true;
    }
    else
        return false;
}
 
// Function to return the precedency of operator
function 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 Postfix
function 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:



Similar Reads

PHP Postfix to Infix Converter
Converting postfix (also known as Reverse Polish Notation) expressions to infix notation is a common task in computer science, especially in the context of parsing and evaluating expressions. In postfix notation, the operator follows its operands, whereas, in infix notation, the operator is placed between the operands. In this article, we will expl
2 min read
PHP Infix to Postfix Converter
Converting infix expressions to postfix notation (also known as Reverse Polish Notation) is a common task in computer science, especially in the context of parsing and evaluating expressions. In infix notation, the operator is placed between the operands, whereas in postfix notation, the operator follows its operands. In this article, we will explo
3 min read
Infix to Postfix using different Precedence Values for In-Stack and Out-Stack
Conversion of infix to postfix expression can be done elegantly using two precedence function. Each operator is assigned a value (larger value means higher precedence) which depends upon whether the operator is inside or outside the stack. Also the right and left associativity for different operators can be handled by varying it's values in the two
12 min read
Postfix to Infix
Infix expression: The expression of the form a op b. When an operator is in-between every pair of operands. Postfix expression: The expression of the form a b op. When an operator is followed for every pair of operands. Postfix notation, also known as reverse Polish notation, is a syntax for mathematical expressions in which the mathematical operat
7 min read
Infix, Postfix and Prefix Expressions/Notations
Mathematical formulas often involve complex expressions that require a clear understanding of the order of operations. To represent these expressions, we use different notations, each with its own advantages and disadvantages. In this article, we will explore three common expression notations: infix, prefix, and postfix. Table of Content Infix Expr
6 min read
Convert Infix expression to Postfix expression
Write a program to convert an Infix expression to Postfix form. Infix expression: The expression of the form "a operator b" (a + b) i.e., when an operator is in-between every pair of operands.Postfix expression: The expression of the form "a b operator" (ab+) i.e., When every pair of operands is followed by an operator. Examples: Input: A + B * C +
13 min read
Prefix to Postfix Converter Online
Prefix to Postfix Calculator is a free online tool to calculate the postfix of a prefix notation. In this converter user has to put the prefix notation in the input box and postfix notation will be displayed as a result. Prefix Expression: An expression is called the prefix expression if the operator appears in the expression before the operands. S
2 min read
Online Postfix to Prefix Converter
Our Postfix to Prefix converter tool helps you convert an expression written in postfix notation (Reverse Polish Notation) to its equivalent prefix notation (Polish Notation). Convert your postfix expressions to prefix notation easily with this free online tool. How to Use Postfix to Prefix Converter?Step 1: Enter your postfix expression in the tex
2 min read
Infix to Prefix conversion using two stacks
Infix: An expression is called the Infix expression if the operator appears in between the operands in the expression. Simply of the form (operand1 operator operand2). Example : (A+B) * (C-D) Prefix: An expression is called the prefix expression if the operator appears in the expression before the operands. Simply of the form (operator operand1 ope
13 min read
Convert Infix To Prefix Notation
Given an infix expression, the task is to convert it to a prefix expression. Infix Expression: The expression of type a 'operator' b (a+b, where + is an operator) i.e., when the operator is between two operands. Prefix Expression: The expression of type 'operator' a b (+ab where + is an operator) i.e., when the operator is placed before the operand
12 min read