Javascript 突出显示输入框内的括号

我试图根据括号的级别以及它们是否匹配来突出显示括号。因此，第一级得到以下类

paren_1

，第二级得到

paren_2

，依此类推。我想突出显示插入符号旁边的括号集（如果有）。这意味着，如果括号旁边有插入符号（开始或结束），则应突出显示所述括号及其对应的括号。我的（坏的）实现显示在小提琴上

这相当有效。问题如下

如果输入字符串中有HTML，则所有内容都会分离。在使用

jQuery（“”）.text（text）.html（）

发送html之前，我尝试对html进行转义，但这会破坏插入符号的位置

如果“同一级别”上有多个括号，且插入符号位于一组括号的旁边，则它会突出显示更多内容

如果有不匹配的括号，则应以红色或类似颜色突出显示。这也不起作用，我不知道如何实施它。我已经尽力了，但一切都失败了 JSFiddle：

请大家注意：我对javascript或jquery都不是很在行，所以如果这段代码让你的眼睛流血，请原谅

---

提前谢谢

问题解决了，但我遇到了另一个问题。以下是修补程序：

以下是更改后的方法：

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;
}

函数着色（文本、位置）{
var i=0，当前_次=0；
var startc='（'，endc='）'；
无功电流=-1；
var实体={'>'：''你应该看看jsfiddles的源代码，看看它们是如何做到的。你的问题太宽泛了。@rambocoder:为什么太宽泛了？我已经详细说明了它的各个方面。我已经尝试了，我想实现的。建议你把演示缩小到较小的组件上，减少对特定困难领域的代码关注，并删除任何非c语言的代码没有引起问题的关键代码