3

括弧のレベルと一致するかどうかに応じて、括弧を強調表示しようとしています。したがって、最初のレベルは次のクラスparen_1を取得し、2 番目のレベルは以下のparen_2ようになります。キャレットの横に括弧がある場合は、そのセットも強調表示したいと思います。つまり、括弧 (開きまたは閉じ) の横にキャレットがある場合、その括弧とそれに対応する括弧を強調表示する必要があります。これの私の（壊れた）実装はフィドルに示されています。

これはかなりうまく機能します。問題は次のとおりです

  1. 入力文字列に HTML がある場合、すべてがバラバラになります。を使用して送信する前に html をエスケープしようとしましたjQuery('<div />').text(text).html()が、これは機能しますが、キャレットの位置が台無しになります。
  2. 「同じレベル」に複数の括弧があり、キャレットが 1 つのセットの隣にある場合、必要以上に強調表示されます。
  3. 一致しない括弧がある場合は、赤または同様のもので強調表示する必要があります。これも機能しておらず、実装方法がわかりません。私は最善を尽くしましたが、すべてが失敗しました。

JSFiddle: http://jsfiddle.net/yWzWV/1/

皆さんへの注意: 私は javascript も jquery もまったく得意ではないので、このコードで目が充血したらすみません。

前もって感謝します！

4

1 に答える 1

5

問題は解決しましたが、別の問題に遭遇しました。修正のフィドルは次のとおりです。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;
}
于 2012-12-24T12:53:57.140 に答える