SOURCE

var input = document.getElementsByTagName('input')[0];
var result = document.getElementsByTagName('p')[0];
var stringArray, left, right;

input.addEventListener('keyup', () => {
  stringArray = input.value.split('');
  left = [];
  right = [];
  for (var i in stringArray) {
    switch (stringArray[i]) {
    case '(':
      left.push({
        key:
        's',
        index: i,
      });
      break;
    case '[':
      left.push({
        key:
        'm',
        index: i,
      });
      break;
    case '{':
      left.push({
        key:
        'l',
        index: i,
      });
      break;
    case ')':
      findPairInLeft({
        key:
        's',
        index: i
      });
      break;
    case ']':
      findPairInLeft({
        key:
        'm',
        index: i
      });
      break;
    case '}':
      findPairInLeft({
        key:
        'l',
        index: i
      });
      break;
    }
  }
  console.log('left:', left);
  console.log('right:', right);
  display();
})

function findPairInLeft(obj) {
  var hasPair = false;

  // for (var i = left.length - 1; i >= 0; i--) {
  //   if (obj.key == left[i].key) {
  //     left.splice(i, 1);
  //     hasPair = true;
  //     break;
  //   }
  // }
    
  if(obj.key == left[left.length - 1].key){
      left.splice(left.length - 1,1);
      hasPair = true;
  }

  if (!hasPair) {
    right.push(obj);
  }
}

function display() {
  $(result).empty();
  stringArray.map( (item, index) => {
      $(result).append('<span>'+item+'</span>')
  });
  
  var resultArray = left.concat(right);
  resultArray.map((item,index) => {
    $(result).find('span').eq(item.index).css('color','red');
  })
}

<input type="text" id="input"/>
<p></p>

span{
  margin:0 2px;
}