javascript - 正则表达式在多个尾随 ]]]] 的情况下无法正常工作

Question

我要求在文本框中用户可以跳转到选项卡上 [] 中包含的下一个单词例如嗨，[这个]是[一个]例子。测试[这个]因此，当我的光标位于 Hi 并按 Tab 键时， [this] 中包含的字符会突出显示当我再次进行制表时，以下 [an] 中包含的下一个字符将突出显示。这很好用

现在的要求是需要突出显示包括 [] 之间的特殊字符的文本

情况 1: 当我有尾随 ]]] 时，它仅突出显示前导 [[[ 并忽略 ]]] ] 例如

情况 2: 如果有多个尾随 ]，例如 [this]]]] 为 [test]，理想情况下是从这里跳出一个表格，它应该转到 [] 中包含的下一个文本，但用户必须跳出 4每次训练乘一个选项卡 ] 转到下一个 [text]

强文本代码是

$(document).ready(function() {
    $('textarea').highlightTextarea({
        color : '#0475D1',
        words : [ "/(\[.*?\])/g" ],
        textColor : '#000000'
    });
    $('textarea').live('keydown', function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode == 9) {
            var currentIndex = getCaret($(this).get(0))
            selectText($(this), currentIndex);
            return false;
        }
    });
});

function selectText(element, currentIndex) {
    var rSearchTerm = new RegExp(/(\[.*?\])/);
    var ind = element.val().substr(currentIndex).search(rSearchTerm)
    currentIndex = (ind == -1 ? 0 : currentIndex);
    ind = (ind == -1 ? element.val().search(rSearchTerm) : ind);
    currentIndex = (ind == -1 ? 0 : currentIndex);
    var lasInd = (element.val().substr(currentIndex).search(rSearchTerm) == -1 ? 0
            : element.val().substr(currentIndex).indexOf(']'));
    var input = element.get(0);
    if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(ind + currentIndex, lasInd + 1 + currentIndex);
    } else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', lasInd + 1 + currentIndex);
        range.moveStart('character', ind + currentIndex);
        range.select();
    }
}

function getCaret(el) {
    if (el.selectionEnd) {
        return el.selectionEnd;
    } else if (document.selection) {
        el.focus();
        var r = document.selection.createRange();
        if (r == null) {
            return 0;
        }
        var re = el.createTextRange(), rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    }
    return 0;
}

请告知我如何处理以上两种情况

Answer 1

首先，正则表达式应该是:

var rSearchTerm = /(\[.*?\]+)/;

使用 + 匹配模式末尾的一个或多个 \]。此外，您不需要围绕正则表达式文字使用 new RegExp() 。

下一个问题是您要使用包含以下内容的代码设置选择的结束位置:

element.val().substr(currentIndex).indexOf(']')

使用 .indexOf(']') 查找 currentIndex 之后的第一个 ]，而不是最后一个当前比赛中的一场。如果使用.match()，您可以找到最后一个。而不是 .search()，因为 .match() 返回一个数组，其中包含匹配的字符串的详细信息 - 您可以从中计算出匹配的长度 -并给出匹配的索引。

此外，重复调用 element.val() 和 element.val().substr() 读起来很糟糕而且效率低下 - 创建一个带有值的变量。多次调用 .search() 并使用所有这些 ?: 三元表达式来不断决定哪些索引变量应该调整为新值，这很难阅读并且令人困惑。最后我只是猜到你想做什么并重写它如下:

function selectText(element, currentIndex) {
    var rSearchTerm =  /(\[.*?\]+)/;
    var val = element.val();
    var matchStartPos, matchEndPos;
    var m = val.substr(currentIndex).match(rSearchTerm);
    if (!m){                             // if it didn't match
        currentIndex = 0;                // wrap back to the beginning
        m = val.match(rSearchTerm);      // and try to match again
    }
    console.log(m);
    if (m) {
        matchStartPos = m.index;
        matchEndPos = matchStartPos + m[0].length;
    } else {
        currentIndex = 0;
        matchStartPos = 0;
        matchEndPos = 0;
    }
    var input = element.get(0);
    if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(matchStartPos + currentIndex, matchEndPos + currentIndex);
    } else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', matchEndPos + currentIndex);
        range.moveStart('character', matchStartPos + currentIndex);
        range.select();
    }
}

工作演示:http://jsbin.com/ewajoy/2/edit