How to color HTML elements based on a user command string

Question

When you type something like "red:Hi:" it will type "Hi" in red. The following script does not work and I do not know why, (The one who made the sorting PHP function is Graphain, thanks again!)

<?php 
  function getit($raw)
  {
  # If the value was posted
  $raw = isset($raw) ? $raw : "";
  # Split it based on ':'
  $parsed = explode(':', $raw);

  $colorClass = "";
  $text = "";

  if (count($parsed) >= 2)
  {
    $colorClass = $parsed[0];
    $text = $parsed[1];
    $text = "~~~" . $text . "~~~" . $colorClass;
    return $text;
  }
  }
?>

<script type="text/javascript">
function postit()
{
    var preview = document.getElementById("preview").value;
    var submit = document.getElementById("post").value;
    var text = <?php getit(submit); ?>
    var t = text[0];
    preview = t;
}
</script>

<textarea id="preview" cols=70 rows=5 readonly>Preview box</textarea>
<p>
<textarea id="post" cols=70 rows=5/>Submit box</textarea>
<p>
<input type="button" onclick="postit();" value="Submit"/>

Answer 1

Maybe something like this instead:

function getit($raw) {
    $t = preg_replace("/\\b([a-z]+):(\\S+)/",
        '<span style="color: $1">$2</span>', $raw);
    return json_encode($t);
}

echo getit("This is some red:example text");

This gives:

"This is some <span style=\"color: red\">example<\/span> text"

In practice, you'd probably want to validate the color, you could use preg_replace_callback for that instead.

Answer 2

I'm not sure if that worked, I am not getting the error "Uncaught ReferenceError: postit is not defined". Any ideas? :

Answer 3

var text = <?php getit(submit); ?>

You seem to be mixing javascript and php.

in your javascript function you are trying to pass in a value pulled out by javascript and put it into the php function.

php is run when the page is outputted to the browser, while the javascript is run when the user clicks the button.

So moving everything to javascript, i'd do something like:

<script type="text/javascript">
function postit()
{
    var submit = document.getElementById("post").value;
    var newHTML = submit.replace(/\b(\w+):(\w+)\b/,'<span style="color: $1">$2</span>');

    document.getElementById("preview").innerHTML = newHTML;
}
</script>

<div id="preview" style="height: 120px; width: 500px; border: 1px solid grey;">Preview box</div>
<p>
<textarea id="post" cols=70 rows=5/>Submit box - test red:hi</textarea>
<p>
<input type="button" onclick="postit();" value="Submit"/>