如何根據用戶命令字符串對HTML元素進行着色

Question

當您鍵入類似「red：Hi：」的內容時，它將以紅色鍵入「Hi」。 下面的腳本不（再誰做的排序PHP函數的一個是Graphain，謝謝！）工作，我不知道爲什麼，

<?php 
    function getit($raw) 
    { 
    # If the value was posted 
    $raw = isset($raw) ? $raw : ""; 
    # Split it based on ':' 
    $parsed = explode(':', $raw); 

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

    if (count($parsed) >= 2) 
    { 
    $colorClass = $parsed[0]; 
    $text = $parsed[1]; 
    $text = "~~~" . $text . "~~~" . $colorClass; 
    return $text; 
    } 
    } 
?> 

<script type="text/javascript"> 
function postit() 
{ 
    var preview = document.getElementById("preview").value; 
    var submit = document.getElementById("post").value; 
    var text = <?php getit(submit); ?> 
    var t = text[0]; 
    preview = t; 
} 
</script> 

<textarea id="preview" cols=70 rows=5 readonly>Preview box</textarea> 
<p> 
<textarea id="post" cols=70 rows=5/>Submit box</textarea> 
<p> 
<input type="button" onclick="postit();" value="Submit"/> 

Answer 1

var text = <?php getit(submit); ?> 

你似乎在混合JavaScript和PHP。

在您的JavaScript函數中，您試圖傳入一個由javascript拉出的值並將其放入php函數中。

當頁面輸出到瀏覽器時運行php，而用戶單擊按鈕時運行javascript。

所以把一切的javascript，我會做一些事情，如：

<script type="text/javascript"> 
function postit() 
{ 
    var submit = document.getElementById("post").value; 
    var newHTML = submit.replace(/\b(\w+):(\w+)\b/,'<span style="color: $1">$2</span>'); 

    document.getElementById("preview").innerHTML = newHTML; 
} 
</script> 

<div id="preview" style="height: 120px; width: 500px; border: 1px solid grey;">Preview box</div> 
<p> 
<textarea id="post" cols=70 rows=5/>Submit box - test red:hi</textarea> 
<p> 
<input type="button" onclick="postit();" value="Submit"/> 

Answer 2

也許這樣的事情，而不是：

function getit($raw) { 
    $t = preg_replace("/\\b([a-z]+):(\\S+)/", 
     '<span style="color: $1">$2</span>', $raw); 
    return json_encode($t); 
} 

echo getit("This is some red:example text"); 

這給：

 
"This is some <span style=\"color: red\">example<\/span> text" 

在實踐中，你可能會想驗證的顏色，你可以使用preg_replace_callback爲代替。