CodeMirror - Using RegEx with overlay

问题

I can't seem to find an example of anyone using RegEx matches to create an overlay in CodeMirror. The Moustaches example matching one thing at a time seems simple enough, but in the API, it says that the RegEx match returns the array of matches and I can't figure out what to do with it in the context of the structure in the moustaches example.

I have a regular expression which finds all the elements I need to highlight: I've tested it and it works.

Should I be loading up the array outside of the token function and then matching each one? Or is there a way to work with the array?

The other issue is that I want to apply different styling depending on the (biz|cms) option in the regex - one for 'biz' and another for 'cms'. There will be others but I'm trying to keep it simple.

This is as far as I have got. The comments show my confusion.

CodeMirror.defineMode("tbs", function(config, parserConfig) {
    var tbsOverlay = {
        token: function(stream, state) {
            tbsArray = match("^<(biz|cms).([a-zA-Z0-9.]*)(\s)?(\/)?>");

            if (tbsArray != null) {
                for (i = 0; i < tbsArray.length; i++) { 
                    var result = tbsArray[i];
                    //Do I need to stream.match each element now to get hold of each bit of text?
                    //Or is there some way to identify and tag all the matches?

                }
            }

            //Obviously this bit won't work either now - even with regex
            while (stream.next() != null && !stream.match("<biz.", false)) {}

            return null;
        }
    };

    return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), tbsOverlay);
});

回答1:

It returns the array as produced by RegExp.exec or String.prototype.match (see for example https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/match), so you probably don't want to iterate through it, but rather pick out specific elements the correspond to groups in your regexp (if (result[1] == "biz") ...)

回答2:

Look at implementation of Code Mirror method match() and you'll see, that it processes method parameter for two types: string and RegExp.

Your constant in

stream.match("<biz.")

is of string type.

Define it in RegExp type:

tbsArray = /<biz./g

Thus, your stream will be matched with RegExp.

来源：https://stackoverflow.com/questions/16564956/codemirror-using-regex-with-overlay

标签

javascript

regex

codemirror