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

【问题标题】：How to color HTML elements based on a user command string如何根据用户命令字符串为 HTML 元素着色
【发布时间】：2011-03-02 12:10:36
【问题描述】：

当您输入“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"/>

【问题讨论】：

标签： php javascript html xampp

【解决方案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"/>

【讨论】：

【解决方案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");

这给出了：

"这是一些示例文本"

实际上，您可能想要验证颜色，您可以使用 preg_replace_callback 代替。

【讨论】：