Style text based on pattern

Is there a way to apply a style based on a pattern, lets say I have text that is in the following format “text:text:text”, how could I make the : one color and the text a different color, I been searching for a solution but I have not found anything, what I am able to do is take the text and add span tags then put it back but I was hoping there could be an easier way of doing this

AFAIK there isn’t a way to do this straight with CSS as it lacks pattern matching based on content (probably because it’s a very basic language with no real programmatic power).

You could manually insert the markup for this, and then style that, or wrap the pattern you want to style differently with markup using JavaScript.

If wouldn’t be something that you would want to use on a whole HTML page as there might be a LOT of matches that need to be replaced, but if you had a few areas where the replacement needed to happen, JS would be more than capable of doing the job.

Depending on what you’re trying to achieve, something along the lines of this will do the trick:


var el = document.getElementById("content");
el.innerHTML = el.innerHTML.replace(/\\:/g,"<span>:</span>");

I actually have something similar right now, let me explain a bit further, I have made a module for Joomla in which the user can enter CSS rules in the configuration everything works fine but I want to make the module´s configuration more visually appealing so the CSS rules are color coded something like this:

color:red;

I managed to do it but this cannot be done in a textarea so I used a p tag with contenteditable set to true, my problem right now is that after Javascript adds the span tags it also sets the cursor to the beginning of the text and if the user keeps typing then the text will be all messed up because they might have half of the word in one end and the other half in the other end


window.addEvent('domready', function() {
    var sinContainers = $$('p.tlakSyntax');
    Array.each(sinContainers, function(sinThis){
        sinThis.innerHTML = sinThis.innerHTML.stripTags();
        sinThis.innerHTML=sinThis.innerHTML.replace(/color/g, '<span class="selector">color</span>');
        sinThis.innerHTML=sinThis.innerHTML.replace(/;/g, '<span class="red">;</span>');
        sinThis.innerHTML=sinThis.innerHTML.replace(/:/g, '<span class="orange">:</span>');
        sinThis.addEvent( 'blur', function(){
        //alert(event.key);
        //if ( event.key == ';' ) {
            this.innerHTML = this.innerHTML.stripTags();
            this.innerHTML=this.innerHTML.replace(/color/g, '<span class="selector">color</span>');
            this.innerHTML=this.innerHTML.replace(/;/g, '<span class="red">;</span><br/>');
            this.innerHTML=this.innerHTML.replace(/:/g, '<span class="orange">: </span>');
        //}
        });
    });
});

Right now the above works onblur just fine but I wanted to do it as it is being typed using onkeyup but can’t manage to set the cursor at the end of the text, also event.key is not working for me because I like to set the function to run when either “:” is pressed or “;” is pressed

Is it possible, using replace method, to replace globally using an array, I have this array


var properties = new Array("background-attachment", "background-color", "background-image", etc...);

How could I make use of the array to replace a value, let´s say I have this text


background-color:red;
background-image:url('someimage.png');

And want to replace it to


<span>background-color</span>:red;
<span>background-image</span>:url('someimage.png');

So basically I want to use the same value being replaced but appending the span tag

In my experience, it’s far better to use a library that has already been developed to provide syntax highlighting of editable code.
The CodeMirror one is the best that I’ve seen at doing the job. It makes in-browser code editing bearable.
Here’s a demo of it doing syntax highlighted editable code, and even showing a preview as you edit.