Question

我希望通过指定背景颜色和索引范围来突出显示文本区域中的文本。然后，我会在用户输入时动态地不断更改和更新突出显示的文本。

jquery.highlightTextarea几乎是完美的。问题是它似乎并没有真正设计为像这样快速更新突出显示的文本。除此之外，作者现已停止使用它，并且不再对其进行更新。

我甚至看了Ace Code Editor，但基于简单索引突出显示的能力并不是真的存在（你必须根据行/列突出显示）。而且，对于我正在做的事情来说，这似乎有些过分。

所以我正在寻找其他选择。除了我提到的功能之外，我的优先级列表中的性能也很高。我想编译一个要考虑的库列表。有什么建议吗？

Answer 1

我终于想出了一些对我有用的东西。我正在使用Ace Editor。我在Ace和CodeMirror之间来回走动，最后选择Ace，因为我觉得这个特殊的任务更直接，文档也更好。我说直截了当，但复杂的是我必须将索引范围转换为列/行范围，因为它是Ace中Range对象期望的格式。

但这就是我想出的：

function HighlightMatches(matches) {
    var matchClass = "myMarker";
    var oldMarkers = inputEditor.session.$backMarkers;

    // clear out old markers
    for (var prop in oldMarkers) {
        if (oldMarkers[prop].clazz == matchClass) {
            inputEditor.session.removeMarker(oldMarkers[prop].id);
        }
    }

    if (matches && matches.length > 0) {
        var ranges = NormalizedRanges(GetInput(), matches);

        // add new markers
        for (var i = 0; i < ranges.length; i++) {
            inputEditor.session.addMarker(new Range(ranges[i].startRow, ranges[i].startCol, ranges[i].endRow, ranges[i].endCol), matchClass);
        }
    }
}    

function NormalizedRanges(input, matches) {
    var ranges = [];

    var startCol = 0;
    var endCol = 0;
    var startRow = 0;
    var endRow = 0;
    var currentMatch = 0;

    var matchStart = 0;
    var matchLength = 0;
    var matchEnd = 0;

    for (var i = 0; i < input.length; i++) {
        matchStart = matches[currentMatch].index;
        matchLength = matches[currentMatch].length;
        matchEnd = matchStart + matchLength;            

        // process match
        if (i >= matchStart && i <= matchEnd) {
            endCol = startCol;
            endRow = startRow;

            for (var k = 0; k < matchLength; k++) {
                endCol++;
                var advanceNewLine = AdvanceNewLine(input.substr(i + k, 2))
                if (advanceNewLine > 0) {
                    endRow++;
                    endCol = 0;
                    if (advanceNewLine == 2)
                        k++;
                }
            }

            ranges.push(new IndexRange(startCol, endCol, startRow, endRow));

            startCol = endCol;
            startRow = endRow;

            // set index to end of match
            i = matchEnd - 1;

            // advance current match
            currentMatch++;
            if (currentMatch == matches.length)
                return ranges;
        }
        else {
            // advance range
            startCol++;
            var advanceNewLine = AdvanceNewLine(input.substr(i, 2));
            if (advanceNewLine > 0) {
                startRow++;
                startCol = 0;
                if (advanceNewLine == 2)
                    i++;
            }
        }
    }

    return ranges;
}

function AdvanceNewLine(text) {
    if (text == '\r\n')
        return 2;
    else {
        var char = text.charAt(0);
        if (char == '\n' || text == '\r')
            return 1;
        else
            return 0;
    }           
}

function IndexRange(startCol, endCol, startRow, endRow) {
    this.startCol = startCol;
    this.endCol = endCol;
    this.startRow = startRow;
    this.endRow = endRow;
}

您只需调用HighlightMatches并传入matches JSON对象，该对象可能如下所示：

{"matches":[{"index":0,"length":1},{"index":4,"length":1}]}

快速突出显示textarea

1 个答案: