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

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

我正在做一些解析来为对象着色。例如，您可以输入 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>

【问题讨论】：

您不能使用 PHP 在客户端更改您的页面，您需要使用 Javascript。
PHP 没有改变页面，PHP 正在设置 JavaScript 使用的值。
但是您会看到它试图设置 javascript 在执行 javascript 时使用的值并使用 javascript 变量。 PHP 没有在他们的浏览器中运行。它只会在页面加载时打印一件事，就是这样。

标签： javascript parsing xampp

【解决方案1】：

这里至少有两个大问题。

您不能 str_replace 像您一样使用通配符（您使用的星号就是这样 - 星号字符，而不是占位符）。
你对页面渲染过程的想法已经过时了——你不能只在 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，您仍然可以将 jQuery 调用更改为您的 getElementById 等（我认为您需要将 html() 调用替换为 '.innerhtml' - 只需查一下）。

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

【讨论】：

【解决方案2】：

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

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

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

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

stringObject.replace(regularExpressionVarOrLiteral, replacement);

乔什

【讨论】：