Как раскрасить HTML-элементы на основе командной строки пользователя

Question

Когда вы набираете что-то вроде «red: Hi:», оно набирает «Hi» красным цветом. Следующий скрипт не работает, и я не знаю почему, (тот, кто сделал функцию сортировки PHP, Graphain, еще раз спасибо!)

<?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

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

Вы, кажется, смешиваете javascript и php.

в вашей функции javascript вы пытаетесь передать значение, извлеченное javascript, и поместить его в функцию php.

php запускается, когда страница выводится в браузер, тогда как JavaScript запускается, когда пользователь нажимает кнопку.

Итак, переместив все в javascript, я бы сделал что-то вроде:

<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"/>

Answer 2

Возможно, что-то вроде этого:

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 is some <span style=\"color: red\">example<\/span> text"

На практике вы, вероятно, захотите проверить цвет, вы можете использовать preg_replace_callback для этого вместо