Beautify and display mathematical equation

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="masked-equation"></div>

CSS

.masked-equation{
  font-family: arial;
  font-size: 11px;
}
.masked-equation>span.variable{
  display: inline-block;
  padding: 8px;
  background-color: #356db0;
  color: #fff;
  margin-left: 1px; 
  margin-right: 1px;
  border-radius: 3px;
}

.masked-equation>span.operator{
  display: inline-block;
  padding: 8px;
  background-color: darkorange;
  color: #fff;
  margin-left: 1px; 
  margin-right: 1px;
  border-radius: 3px;
}

.masked-equation>span.bracket{
  display: inline-block;
  padding: 8px;
  background-color: green;
  color: #fff;
  margin-left: 1px; 
  margin-right: 1px;
  border-radius: 3px;
}

.masked-equation>span.static{
  display: inline-block;
  padding: 8px;
  background-color: red;
  color: #fff;
  margin-left: 1px; 
  margin-right: 1px;
  border-radius: 3px;
}

JavaScript

function beautifyEquation(equation){

	let pointer = 0;
	let currentVar = '';
  let currentVarStarted = false;
	let currentOperator = '';
  let currentOperatorStarted = false;
  let currentStatic = '';
  let currentStaticStarted = false;
  
  function isNumeric(n){
  
   if (n >= '0' && n <= '9') {
      
      return true;
      
    } else {
        
      return false;
        
    }
  
  }
  
  
  $('.masked-equation').html('');

	while(pointer < equation.length){
  
    
    // start variable checks
  	
    if((equation.substr(pointer-2,1) == ' ') && (!isNumeric(equation.substr(pointer-1,1))) && (equation.substr(pointer,1) == ' ')){
    
    	$('.masked-equation').append('<span data-value"' + equation.substr(pointer-2,3) + '" class="operator">' + equation.substr(pointer-2,3) + '</span>');
          
       currentOperator = '';
      
      
    } 
    
    if(currentOperatorStarted){
    
    	currentOperator += equation.substr(pointer,1);
      
    }
    
    
    
    // start variable checks
  	
  	if(equation.substr(pointer,1) == '['){
    
    	currentVarStarted = true;
      currentVar = '';
    
    }
    
    if(currentVarStarted){
    
    	currentVar += equation.substr(pointer,1);
      
    }
    
    if(equation.substr(pointer,1) == ']'){
    
    	currentVarStarted = false;
      
      $('.masked-equation').append('<span data-value"' + currentVar + '" class="variable">' + currentVar + '</span>');
    
    } else {
    	
       if(equation.substr(pointer,8) == 'Math.abs'){
    
          $('.masked-equation').append('<span data-value"Math.abs(" class="bracket">Math.abs(</span>');
          
          pointer+=8;

        } else if(equation.substr(pointer,9) == 'Math.acos'){
    
          $('.masked-equation').append('<span data-value"Math.acos(" class="bracket">Math.acos(</span>');
          
          pointer+=9;

        } else if(equation.substr(pointer,10) == 'Math.acosh'){
    
          $('.masked-equation').append('<span...