Как раскрасить HTML-элементы на основе анализа пользовательской строки команды

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

У вас есть как минимум две серьезные проблемы здесь.

1. Вы не можете str_replace с такими подстановочными знаками, как вы (звездочки, которые вы используете, это просто - символ звездочки, а не заполнитель).

2. Ваша идея процесса рендеринга отключена - вы не можете просто вызвать некоторый код PHP в JavaScript и заставить его обновить страницу.Любой код PHP будет выполнен и напечатан, когда ваша страница генерируется на сервере - он не может взаимодействовать со страницей, как может JavaScript (JS может, потому что он выполняется внутри браузера, но браузер фактически никогда не видит ваш код PHP как выможете проверить, зайдя в View-> Source и увидев, что вы видите).Вы, конечно, не можете ссылаться на переменную JavaScript из PHP.

Два варианта.

Вариант 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>

Answer 2

Здесь вы смешиваете серверные и клиентские технологии.Код в блокировке php оценивается один раз (пока еще на сервере).Вы ищете что-то, что будет работать полностью на стороне клиента.

Это означает, что вам нужно искать регулярные выражения Javascript, а не вещи типа PHP preg_match.

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

Вы ищете этот тип вещи:

stringObject.replace (normalExpressionVarOrLiteral, замена);

Джош