<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<title></title>
<meta name="description" content="" />
<style>
.output > span {
display: inline-block;
width: 2rem;
height: 1.5rem;
padding: 0.25rem 0.25rem;
text-align: center;
background: #DDD;
}
.output > span:nth-child(2n-1) {
background: #EEE;
}
</style>
</head>
<body>
<div>
<input type="text" id="infix" value="2+log_{3}(9)-4" oninput="newInput()" onchange="newInput()" />
</div>
Infix Array:
<div id="infixArray" class="output">
</div>
Postfix Array:
<div id="postfixArray" class="output">
</div>
<table>
<thead>
<tr><th>Step</th><th>Postfix Array</th><th>Stack</th></tr>
</thead>
<tbody id="allSteps">
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
var prec = {};
prec[',']=1;
prec['=']=1.5;
prec['<=']=1.5;
prec['>=']=1.5;
prec['==']=1.5;
prec['!=']=1.5;
prec['>']=1.5;
prec['<']=1.5;
prec['+']=2;
prec['-']=2;
prec['*']=3;
prec['/']=3;
prec['^']=4;
prec['%']=10;
prec['max']=10;
prec['min']=10;
prec['sum']=10;
prec['sin']=10;
prec['cos']=10;
prec['tan']=10;
prec['csc']=10;
prec['sec']=10;
prec['cot']=10;
prec['ln']=10;
prec['log']=10;
prec['_']=11;
newInput();
function toInfixArray(input){
var arr = [];
var str = "";
for (var i=0;i<input.length;i++){
if ("+-*/()^%,{}_".indexOf(input[i]) > -1){
if (str.length > 0){arr.push(str);}
arr.push(input[i]);
str = "";
}
else if ("!=<>".indexOf(input[i]) > -1){
if (i+1 < input.length && input[i+1] == "="){
if (str.length > 0){arr.push(str);}
arr.push(input[i]+input[i+1]);
i++;
}
else {
if (str.length > 0){arr.push(str);}
arr.push(input[i]);
}
str = "";
}
else if (input[i] == " "){
if (str.length > 0){arr.push(str);}
str = "";
}
else {
str += input[i];
}
}
if (str.length > 0){arr.push(str);}
return arr;
}
function toPostfixArray(input,max=-1){
var stack = [];
var postfix = [];
var maxx = max;
if (maxx > input.length || maxx < 0){maxx = input.length;}
for (var i=0;i<maxx;i++){
if (prec[input[i]]){
if (stack.length == 0){
stack.push(input[i]);
}
else if (prec[stack[stack.length-1]] < prec[input[i]]){
stack.push(input[i]);
}
else if (stack[stack.length-1] == "^" && input[i] == "^"){
stack.push(input[i]);
}
else {
while (stack.length > 0 && prec[stack[stack.length-1]] >= prec[input[i]]) {
if (stack[stack.length-1] == "^" && input[i] == "^"){break;}
var last = stack[stack.length-1];
postfix.push(last);
stack.pop();
}
stack.push(input[i]);
}
}
else if (input[i] == '(' || input[i] == '{'){
stack.push(input[i]);
}
else if (input[i] == ')'){
while (stack.length > 0 && stack[stack.length-1] != "(") {
var last = stack[stack.length-1];
postfix.push(last);
stack.pop();
}
if (stack.length > 2 && stack[stack.length-2] == "_"){
stack.pop();
stack.pop();
var last = stack[stack.length-1];
postfix.push(last);
}
stack.pop();
}
else if (input[i] == '}'){
while (stack.length > 0 && stack[stack.length-1] != "{") {
var last = stack[stack.length-1];
postfix.push(last);
stack.pop();
}
stack.pop();
}
else {
postfix.push(input[i]);
}
}
if (max == -1){
while (stack.length > 0) {
var last = stack[stack.length-1];
postfix.push(last);
stack.pop();
}
return postfix;
}
return {postfix:postfix,stack:stack};
}
function newInput(){
var arr = toInfixArray(document.getElementById('infix').value);
var postfix = toPostfixArray(arr,-1);
console.log(postfix)
var out = document.getElementById('infixArray');
out.innerHTML = "";
for (var i=0;i<arr.length;i++){
var span = document.createElement('span');
span.textContent = arr[i];
out.appendChild(span);
}
out = document.getElementById('postfixArray');
out.innerHTML = "";
for (var i=0;i<postfix.length;i++){
var span = document.createElement('span');
span.textContent = postfix[i];
out.appendChild(span);
}
var allSteps = document.getElementById('allSteps');
allSteps.innerHTML = "";
for (var ii=1;ii<arr.length+1;ii++){
var obj = toPostfixArray(arr,ii);
var tr = document.createElement('tr');
var cell1 = document.createElement('td');
cell1.textContent = arr[ii-1];
tr.appendChild(cell1);
var cell2 = document.createElement('td');
cell2.classList.add('output');
var cell3 = document.createElement('td');
cell3.classList.add('output');
tr.appendChild(cell2);
tr.appendChild(cell3);
for (var i=0;i<obj.postfix.length;i++){
var span = document.createElement('span');
span.textContent = obj.postfix[i];
cell2.appendChild(span);
}
for (var i=0;i<obj.stack.length;i++){
var span = document.createElement('span');
span.textContent = obj.stack[i];
cell3.appendChild(span);
}
allSteps.appendChild(tr);
}
}
This repl is a simple postfix algorithm. Most basic math operations should be postfixed properly.
To view this on TripleLog, click here.
This page outputs a postfixed array as well as step-by-step logs. Enter an expression in the input element at the top and it will be postfixed instantly. You can change this to only show what you want.
Edit the script.js file to change the algorithm. The algorithm is a bit more complicated than necessary to allow for the step-by-step output.
You can try to add support for more operations, make the code faster/better, or whatever.