JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<textarea id='txt'></textarea>
<button id='gen'>
generate
</button>
<button id='intReplace'>
int replace
</button>
<button id='intAdd'>
int add
</button>
<div id='result'></div>

<textarea id='text-area-2'></textarea>
<div id='text-area-2-binding'>

</div>

CSS

textarea {
  min-width: 500px;
  min-height: 200px;
}
body {
  font-family: arial;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 1px;
}

JavaScript

$(function() {
  var txt = $('#txt');
  var result = $('#result');

	$('#gen').on('click', function() {
  	var text = $(txt).val();
    $(result).text(generateResult(text));
  });
  $('#intReplace').on('click', function() {
  	var text = $(txt).val();
    $(result).text(removeIntWrapper(text));
  });
  $('#intAdd').on('click', function() {
  	var text = $(txt).val();
    $(result).text(addIntWrapper(text));
  });
  $('#text-area-2').on('input', function() {
  	$('#text-area-2-binding').text($(this).val());
  });
});

function generateResult(text) {
	var split = text.split(' + ');
  console.log(split);
  var result = '';
  for(var i = 0; i < split.length; i++) {
  	var piece = split[i];
    result += wrapInIsNull(piece);
    if(i != split.length - 1) {
    	result += '|';
    }
  }
  return result;
}

function removeIntWrapperFirst(text) {
	var split = text.split("|");
  var result = '';
  for(var i = 0; i < split.length; i++) {
  	var piece = split[i];
    result += piece.replace('integer(', '');
  }
  return result
}
function removeIntWrapper(text) {
	var removeIntFirst = removeIntWrapperFirst(text);
  var split = removeIntFirst.split("))");
  var result = '';
  for(var i = 0; i < split.length; i++) {
  	var piece = split[i];
  	if(i === 0) {
    	result += piece;
    } else if(i > 0 && i < split.length - 1) {
    	result += piece.replace('is_null', ') | is_null');
    } else if(i === split.length - 1) {
    	result += ')';
    }
  }
  return result
}
function addIntWrapper(text) {
	var split = text.split('|');
  var result = '';
  for(var i = 0; i < split.length; i++) {
  	var piece = split[i];
    var temp = piece.replace('is_null', 'is_null(integer');
    temp += ')';
    if(i < split.length - 1) {
    	temp += ' | ';
    }
    result += temp;
  }
  return result;
}
function wrapInIsNull(text) {
	return 'is_null(' + text + ')';
}