如何根据用户命令字符串为 HTML 元素着色

Question

当您键入“red:Hi:”之类的内容时，它将以红色键入“Hi”。 下面的脚本不起作用，我不知道为什么，（制作排序PHP功能的是Graphin，再次感谢！）

<?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 来代替。