突出顯示輸入框內的括號

Question

我想根據它們的級別以及它們是否匹配來突出顯示括號。所以第一級獲得以下類paren_1，第二級獲得paren_2等。如果有的話，我想突出顯示插入符號旁邊的圓括號。意思是如果你在括號旁邊開了一個插入符（開或關），它應該突出顯示所述括號及其對應的括號。小提琴中顯示了我的（破碎的）實現。

這工作得很好。問題如下

1. 如果輸入字符串中有HTML，則所有內容都會分開。我試圖在使用jQuery('<div />').text(text).html()發送它之前嘗試轉義html，該工作可行，但廢棄插入位置。
2. 如果「同一級別」上有多個括號，並且插入符號緊挨着一個集合，它將突出顯示比它應該顯示的更多。
3. 如果有不匹配的括號，應該用紅色或類似的方式突出顯示。這不起作用，我不知道如何實現它。我盡力而爲，但一切都失敗了。

的jsfiddle：http://jsfiddle.net/yWzWV/1/

注意給大家：我在沒有辦法很好用JavaScript或jQuery的，所以你必須，如果這個代碼使你的眼睛流血原諒我。

在此先感謝！

Answer 1

問題解決了，但我遇到了另一個問題。下面是與修復的小提琴：http://jsfiddle.net/Axvgf/

這裏的改變方法：

function colorize(text, pos) { 
    var i = 0, current_times = 0; 
    var startc = '(', endc = ')'; 
    var current = -1; 

    var entities = {'>': '&gt;','<':'&lt;'}; 
    var p2 = 0; 
    var regex = new RegExp(Object.keys(entities).join("|"),'g'); 
    var converted = text.replace(regex, function(x, j) { 
     if(pos > j) p2 += entities[x].length - 1; 
     return entities[x]; 
    }); 

    pos += p2; 
    var parens = [], indices = [], o = {}; 
    var newText = converted.replace(/((?:\\)*)([()])/g, function(full, escape, x, idx) { 
     var len = escape.split(/\\/g).length - 1; 
     if (len % 2 == 0) { 
      indices.push(idx); 
      if (x == startc) ++i; 
      o[idx] = { selected: false, type: x, depth: i, idx: idx, pair: -1, extra: escape }; 
      if (idx == pos) o[idx].selected = true; 
      if (x == startc) parens.push(idx); 
      else { 
       if (parens.length > 0) { 
        var p = parens.pop(); 
        o[idx].pair = p; 
        if (o[p].selected) o[idx].selected = true; 
        o[p].pair = idx; 
        if (o[idx].selected) o[p].selected = true; 
       } 
       --i 
      } 
     } 
    }); 
    newtext = converted;  
    indices = indices.sort(function(x,y) { return Number(y) - Number(x); }); 
    indices.forEach(function(i) { 
     newtext = newtext.substr(0,i) + o[i].extra + 
     "<span class='" + (o[i].pair == -1 ? "unmatched " : "paren_" + (o[i].depth % 5)) + 
     (o[i].selected ? " selected_paren": "") + "'>" + o[i].type + "</span>" + 
     newtext.substr(i + 1 + o[i].extra.length) 
    }); 
    return newtext; 
}