SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code javascript:
    var el = document.getElementById("content");
    el.innerHTML = el.innerHTML.replace(/\:/g,"<span>:</span>");
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    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:

    Code javascript:
    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


    Code javascript:
    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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    replace using array myel.replace(array, array)

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

    Code JavaScript:
    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

    HTML Code:
    background-color:red;
    background-image:url('someimage.png');
    And want to replace it to

    HTML Code:
    <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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    How could I make use of the array to replace a value, letīs say I have this text

    HTML Code:
    background-color:red;
    background-image:url('someimage.png');
    And want to replace it to

    HTML Code:
    <span>background-color</span>:red;
    <span>background-image</span>:url('someimage.png');
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •