jQuery question

[CosmosRP]

Okay, this is basically what i'm doing:

 

  <script type="text/javascript">
    $(document).ready(function() {
    $("*").each(function(e) {
     this.style.color = this.nodeName;
     });
    });
      </script>

 

Basically, when it identifies stuff like <red>Test</red> and the output would be the color red. I am trying to create custom html tags, so that people can type <pink>My test</pink> and their text would come out pink! Its a neat idea, but there are two problems: I don't understand how this code works (it makes no sense to me and i was hoping someone could explain it) and secondly, is there a way that I can make this code pick up on html entities instead? For example:

 

<pink&rt;My test&lt/pink&rt; - Can this code be modified to pick up on this too instead of < and >? I don't want to comprise security by allowing unsanitized strings to be posted.

 

 

 

 

[Adam]

This is an extremely inefficient way of doing this. For example this page right now will have several hundred elements on it, and you're looping through every single one of them trying to set the colour property to the name of the element. The JS engine must also validate the colour, because when I did a quick test, a paragraph tag's (<p>) colour wasn't set to "p".

 

Also I don't really understand how you're trying to use this. Are you just running it on pages where the custom mark-up is output? Like for example when viewing the posts on this page, you'd run that script to set the colours of the custom elements? If so, that's a really bad way of doing it. Not sure where the entities come into that either.

 

Personally I'd reconsider your approach to this. Rather than depending on JS - which not every user has enabled - I'd format the custom mark-up using PHP - server-side - before outputting in the HTML. For example:

 

<?php

$input = '<pink>my pink text</pink>';

$custom_markup_regexps = array(
    '/<pink>(.*?)<\/pink>/'     => '<span class="pink">$1</span>',
    '/<red>(.*?)<\/pink>/'      => '<span class="red">$1</span>',
    '/<blue>(.*?)<\/pink>/'     => '<span class="blue">$1</span>',
    // add more here for other replacements
);

$output = preg_replace(array_keys($custom_markup_regexps), array_values($custom_markup_regexps), $input);

echo $output;

?>

 

The output from that is:

 

<span class="pink">my pink text</span>

 

Less resource heavy, removes the JS dependency and adheres to standards.