JSFiddle - React, Tailwind, and code Playground

by Graham Walters

CSS

body {
    font-size: 14px;
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}

JavaScript

var str = 'This#00CC00 is green$Courier| and /^mono|spaced';
var patt=/#(\d|\w){6}|\/(\+|\^|\-|#|!\+|_|@|\*|%|&|~)|\$([^\|]+)\||\|/g;
var ret = "";

pos = [];
while (match=patt.exec(str)) {
    pos.push(match.index);
    pos.push(patt.lastIndex);
    console.log(match.index + ' ' + patt.lastIndex);
}

for (var i=0; i<pos.length; i+=2) {
    ret += Array(1+pos[i]- (i==0 ? 0 : pos[i-1])).join("§");
    ret += str.substring(pos[i], pos[i+1]);
}
ret += Array(1+str.length-pos[pos.length-1]).join("§");

document.body.innerHTML = str +"<br>"+ret;

console.log(str);
console.log(ret);