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

Question

我正在研究一些解析来为对象着色。 例如，您可以输入 red:Hi!: 和“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>

Answer 1

这里至少有两个大问题。

1. 你不能像你一样用通配符进行str_replace（你使用的星号只是星号字符，而不是占位符）。

2. 您对页面渲染过程的想法是错误的 - 您不能只在 JavaScript 中调用一些 PHP 代码并让它更新页面。当您的页面在服务器上生成时，任何 PHP 代码都会被执行并打印 - 它不能像 JavaScript 那样与页面交互（JS 可以，因为它是在浏览器中执行的，但浏览器实际上永远不会像您一样看到您的 PHP 代码）可以通过转到“查看”->“源”并查看您所看到的内容进行检查）。您当然不能从 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 - 正确的客户端

在您的 中包含 jQuery标签让您的生活更轻松。如果您确实不想包含 jQuery，您仍然可以更改对 getElementById 等的 jQuery 调用（我认为您需要用“.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>

Answer 2

您在这里混合了服务器和客户端技术。 php 锁中的代码被评估一次（同时仍在服务器上）。您正在寻找完全在客户端运行的东西。

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

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

您是寻找这种类型的东西：

stringObject.replace(regularExpressionVarOrLiteral, replacement );

乔什