Question

我有'contenteditable'的div。我想在这个div中过滤char，当[^ą-źa-z0-9\s] AND NOT（＆amp; nbsp;）时，我必须更改颜色char，与模式不匹配。例如，当我得到$(this).html()时： dfgtąść45％$＃ tg＆amp; nbsp; ss ＆amp; k ; - 我想换成红色粗体字。

JS：

var t = $(this).html().replace(/<\/?[^>]+>/gi, '').replace(/\s$/, '&nbsp;');
t = t.replace(/(&nbsp;)[^ą-źa-z0-9\s]/ig,function(match){return '<span style="color: red;">' + match + "</span>";});
$(this).html(t);

Answer 1

这是一种方式

t = t.replace( /(&nbsp;)|(?:(?!&nbsp;)[^ą-źa-z0-9\s])+/ig,
    function ( match, nbsp ) {
        return nbsp ? nbsp : '<span style="color: red;">' + match + "</span>";
});

请注意，不建议以这种方式操作html：例如，元素属性中与否定字符类匹配的任何字符都会被错误地包含在span标记中。

Answer 2

如果要突出显示与某个模式不匹配的内容，可以使用此代码。这比尝试修改正则表达式以否定匹配更具可扩展性。

function unmatches(regex, str, callback) {

    var result = "";
    var lastAppend = 0;

    var arr;
    var nonMatching;

    while ((arr = regex.exec(str)) != null) {
        nonMatching = str.substring(lastAppend, arr.index);

        if (typeof callback === "function") {
            nonMatching = callback(nonMatching);
        }
        // If a function is not supplied, currently, it output back
        // the input string. It can be extended, though.

        result += nonMatching + arr[0];
        lastAppend = arr.index + arr[0].length;

        // In case the global flag is not set
        // There is at most one match without global flag
        if (!regex.global) {
            break;
        }
    }

    nonMatching = str.substring(lastAppend);

    if (typeof callback === "function") {
        nonMatching = callback(nonMatching);
    }

    result += nonMatching;

    return result;
}

以您的案例为例（请注意我添加了g标志）：

var result = unmatches(/(&nbsp;)*[ą-źa-z0-9\s]+/g, "dfgtąść45%$#tg&nbsp;ss&k;", function (m) {
    if (m === "") {
        // Non matching part can be empty string
        return m; // Ignore
    } else {
        // The non-empty string case
        return '<span style="color: red;">' + m + '</span>';
    }
});

替换RegEx - 负面模式

2 个答案: