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 h 1 {
color : black ;
} .navbar-light .navbar-brand { color : white ;
} .navbar navbar-light bg-light { width : 100% ;
} .navbar { padding : 0% ;
} .navbar-brand { font-size : 1.8 rem;
} .navbar-light .navbar-brand:hover { color : white ;
} .inputdata { text-align : center ;
margin-top : 21 vh;
} .span 1 {
font-size : 2 vw;
font-weight : 500 ;
color : black ;
} .input 1 {
width : 58 vw;
text-align : center ;
height : 3 vw;
place-items: center ;
font-size : 20px ;
border : 2px solid white ;
border-radius: 18px ;
margin-top : 2 vw;
} .btn 1 {
border : wheat;
background-color : #6f459e ;
text-align : center ;
color : white ;
font-weight : 500 ;
border-radius: 8px ;
margin-top : 1.5 vw;
width : 7 vw;
height : 6 vh;
} 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: