Javascript 如何基于解析用户命令字符串为HTML元素着色

我正在做一个小的分析工作来给对象着色。 例如，您可以键入red:Hi！：“嗨！”应该是红色的

这是我的非工作代码：

<script type="text/javascript">
function post()
{
    var preview = document.getElementById("preview");
    var submit = document.getElementById("post");
    var text = submit.value;
    <?php str_replace("red:*:",'<i class="red">*</i>',text); ?>
    preview.value = text;
}
</script>

职能职位（）
{
var preview=document.getElementById（“预览”）；
var submit=document.getElementById（“post”）；
var text=submit.value；
这里混合了服务器端和客户端技术。php锁中的代码只计算一次（仍在服务器上）。您正在寻找完全在客户端运行的东西

这意味着您需要研究Javascript正则表达式，而不是PHP preg_match类型的东西


您正在寻找这种类型的东西：

stringObject.replace（RegularExpressionVariorLiteral，replacement）

Josh
你这里至少有两个大问题

你不能像现在这样用通配符替换（你使用的星号只是星号，不是占位符）

你对页面呈现过程的想法是错误的-你不能仅仅用JavaScript调用一些PHP代码并让它更新页面。当你的页面在服务器上生成时，任何PHP代码都会被执行和打印-它不能像JavaScript那样与页面交互（JS可以，因为它是在浏览器中执行的，但是浏览器从来没有真正看到您的PHP代码，您可以通过查看->源代码并查看您看到的内容来检查）。您当然不能从PHP中引用JavaScript变量

两种选择

选项1-正确的服务器端
如果要根据post为页面加载上的对象着色，请执行以下操作：

<?php 
  # If the value was posted
  $raw = isset($_POST['userstring']) ? $_POST['userstring'] : "";
  # Split it based on ':'
  $parsed = explode(':', $raw);

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

  if (count($parsed) >= 2)
  {
    $colorClass = $parsed[0];
    $text = $parsed[1];
  }

?>

<form action="" method="post">
  <input type="text" name="userstring" value=""/>
  <input type="submit" value="Submit" />
</form>

<div id="preview">
<?php if (strlen($text) > 0) { ?>
  <i class="<?php echo $colorClass; ?>">
    <?php echo $text; ?>
  </i>
<?php } ?>
</div>


您不能使用PHP在客户端更改页面，您需要使用Javascript进行更改。PHP没有更改页面，PHP正在设置Javascript使用的值。但您可以看到，它正在尝试设置Javascript在执行Javascript时使用的值，并使用Javascript变量。PHP没有在r浏览器。它只会在页面加载时打印一件东西，那就是它。
<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<script type="text/javascript">                           
  function post() {                 
    var split = $('#userinput).val().split(separator, limit)        
    if (split.length >= 2) {     
      var color = split[0];              
      var text = split[1]; 
      $('#preview').html('<i class="' + color + '">' + text + '</i>');    
    }
    return false; // Stop form submit
  }                           
</script> 

<form action="" method="post" onsubmit="post()">
  <input id="userinput" type="text" name="userstring" value=""/>
  <input type="submit" value="Submit" />
</form>
<div id="preview">
</div>
</body>