Question

我正在处理一个小的解析事物来着色对象。例如，您可以键入红色：嗨！：和“嗨！”会是红色的。

这是我的工作代码：

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

Answer 1

您在这里混合使用服务器端和客户端技术。 php锁中的代码被评估一次（仍然在服务器上）。你正在寻找一些完全在客户端运作的东西。

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

http://www.regular-expressions.info/javascriptexample.html

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

stringObject.replace（regularExpressionVarOrLiteral，replacement）;

约什

Answer 2

这里至少有两个大问题。

你不能像你一样使用通配符str_replace（你使用的星号就是那个 - 星号字符，而不是占位符）。
您对页面呈现过程的想法是关闭的 - 您不能只是在JavaScript中调用一些PHP代码并让它更新页面。当你的页面在服务器上生成时，任何PHP代码都会被执行和打印 - 它不能像JavaScript那样与页面交互（JS可以因为它在浏览器中执行，但浏览器实际上从未真正看到你的PHP代码）可以通过转到View-＆gt; Source并查看您看到的内容进行检查。你当然不能从PHP引用JavaScript变量。

两个选项。

选项1 - 正确的服务器端

如果你想根据帖子在页面加载上着色对象，请执行以下操作：

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

选项2 - 正确的客户端

在＆lt; head＆gt;中加入jQuery标记让您的生活更轻松。如果你真的不想包含jQuery，你仍然可以将jQuery调用更改为你的getElementById等。（你想用'.innerhtml'替换html（）调用我认为 - 只需查看它。

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

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

2 个答案:

选项1 - 正确的服务器端

选项2 - 正确的客户端