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= 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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
