Подсветка синтаксиса

var reg = /(([\'"])(.*?)\2)|([\+\-\*\=\!])|(([a-zA-Z][a-zA-Z0-9]*?[\s]*?)(\())|((^|[\s\!\@\#\$\%\^\&\*\)\(\-\+\=\[\{\]\}\'"\/\.\,\>\<\?\:\;\\])((\d+?)|(RegExp|var|let|function|document|window|location|console|global|const|class)|(if|for|while|do|case|switch|try|catche|instanceof|return|new|of)|(self|this)|(null|NULL|true|false))(?=[\s\!\@\#\$\%\^\&\*\)\(\-\+\=\[\{\]\}\'"\/\.\,\>\<\?\:\;\\]|$))/g;
 
function fn(str, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, offset, s){
    if (p1) return '<span class="string">'+p1+'</span>';
    if (p4) return '<span class="oper">'+p4+'</span>';
    if (p5) return '<span class="method">'+p6+'</span>'+p7;
    if (p8) {
        if (p11) return p9+'<span class="num">'+p11+'</span>';
        if (p12) return p9+'<span class="keyword-1">'+p12+'</span>'
        if (p13) return p9+'<span class="keyword-2">'+p13+'</span>';
        if (p14) return p9+'<span class="keyword-3">'+p14+'</span>';
        if (p15) return p9+'<span class="keyword-4">'+p15+'</span>';
    }
"code".replace(reg, fn);

//сначала нахожу все строки в любых кавычках и заключаю их в span.string для задания цвета
var code = "code".replace(/(([\'"])(.*?)\2)/g, '<span class="string">$1</span>')
//затем ищу все ключевые слова и также заключаю их в span.keyword 
//в первых скобках перечисляю знаки препинания, начало строки, всякие пробелы (вроде как \b но русские буквы не считаю границей), аналогично в третьей скобки
//следом за "пробельным символом" идёт скобка со списком ключевиков которые и заключаются в span
code = code.replace(/(^|[\s\!\@\#\$\%\^\&\*\)\(\-\+\=\[\{\]\}\'"\/\.\,\>\<\?\:\;\\])(var|class|function|for|if)([\s\!\@\#\$\%\^\&\*\)\(\-\+\=\[\{\]\}\'"\/\.\,\>\<\?\:\;\\]|$)/g, '$1<span class="keyword">$2</span>$3')
// и так далее

((^|[\s\!\@\#\$\%\^\&\*\)\(\-\+\=\[\{\]\}\'"\/\.\,\>\<\?\:\;\\])((\d+?)|(RegExp|var|let|function|document|window|location|console|global|const|class)|(if|for|while|do|case|switch|try|catche|instanceof|return|new|of)|(self|this)|(null|NULL|true|false))(?=[\s\!\@\#\$\%\^\&\*\)\(\-\+\=\[\{\]\}\'"\/\.\,\>\<\?\:\;\\]|$))

[^A-Za-z0-9_](RegExp|var|let|function|document|window|location|console|global|const|class)|(if|for|while|do|case|switch|try|catche|instanceof|return|new|of)|(self|this)|(null|NULL|true|false))[^A-Za-z0-9_]

var code = 'code';
var reg = /...ваше регулярное выражение.../g
var match;
 
while (match = reg.exec(code)) {
  expression = match[0]; pos = match.index;
  //И тут уже имея найденные вхождения и их позиции решите что с ними делать
}

[^A-Za-z0-9_](RegExp|var|let|function|document|window|location|console|global|const|class)|(if|for|while|do|case|switch|try|catche|instanceof|return|new|of)|(self|this)|(null|NULL|true|false))[^A-Za-z0-9_]

/([\!\/\*\-\+\=])/g

var str = "var self=this;",
        newStr = str, //строка со спанами, что бы не менять текущую строку, а то получиться ситуация как в пункте 2)
    lengthDef = 0, //разница в длинне оригинальной строки и строки со спанами
    reg = /([\!\/\*\-\+\=])|((^|\s|\;|\=)(var|self|this|class)($|\s|\;|\=))/g,
    matches;
while(matches = reg.exec(str)){
    if (matches[1]) {
        newStr = newStr.substring(0, matches.index+lengthDef) + '<span class="ed-oper">' + matches[1] + '</span>' + newStr.substring(matches.index + lengthDef + matches[1].length);
            lengthDef += '<span class="ed-oper"></span>'.length;
    }
    if (matches[2] && matches[4]) {
        newStr = newStr.substring(0, matches.index+lengthDef) + '<span class="ed-keyword-1">' + matches[4] + '</span>' + newStr.substring(matches.index + lengthDef + matches[4].length);
            lengthDef += '<span class="ed-keyword-1"></span>'.length;
    }
}
console.log(newStr)
// тут выводит '<span class="ed-keyword-1">var</span> self<span class="ed-oper">=</span>this;'

var str = 'var self="строка с function и прочим";';
str = str.replace(/((['"])(.*?)\2)|((^|[\s+-=*!@#$%^&*();.,:><[\]\\\/])([^\s+-=*!@#$%^&*();.,:><[\]\\\/]+?)(?=[\s+-=*!@#$%^&*();.,:><[\]\\/]|$))/g, function(str, p1, p2, p3, p4, p5, p6){
    if (p1) return p1;
    if (p6) return p5+'<'+p6+'>';
    return str;
});
console.log(str) //<var> <self>=<"строка> <с> <function> <и> <прочим">;

/([-!\/*+=])|((^|[\s;=])(var|self|this|class)($|[\s;=]))/g

var rKeywords = /\b(RegExp|var|let|function|document|window|location|console|global|const|class)|(if|for|while|do|case|switch|try|catche|instanceof|return|new|of)|(self|this)|(null|NULL|true|false)\b/g,
    rSymbols = /\b[-:!\/*+=]+\b/g,
    str = newStr = 'var self=this;',
    lengthDef = 0,
    matches;
newStr = str.replace(
  rSymbols, function(m) {
    return '<span SPAN_CLASS="ed-oper">' + m + '</span>';
  }
).replace(
  rKeywords, function(m, m1, m2, m3, m4) {
    if(m1) return '<span SPAN_CLASS="ed-keyword-1">' + m1 + '</span>';
    if(m2) return '<span SPAN_CLASS="ed-keyword-2">' + m2 + '</span>';
    if(m3) return '<span SPAN_CLASS="ed-keyword-3">' + m3 + '</span>';
    if(m4) return '<span SPAN_CLASS="ed-keyword-4">' + m4 + '</span>';
    return m;
  }
).replace(/SPAN_CLASS/g, 'class')
console.log(newStr)