如何突出textarea html代碼的一部分

我想實現python版本web regexbuddy，並且遇到一個問題，如何在textarea中突出顯示不同顏色的匹配值（在黃色和藍色之間切換），還有演示http://regexpal.com究竟是什麼我想要的，但我是js的新手，我不明白他的代碼含義。任何意見理解如何突出textarea html代碼的一部分

alt text

來源

2010-09-27 mlzboy

添加標籤：JavaScript的，這看起來是對如何突出使用JavaScript文本區域的問題。 – pyfunc 2010-09-27 16:22:35

有超過textarea的一個pre元件。所以，當你輸入任何內容時，它將複製pre元素上的輸入，並應用一些過濾器。

例如：

<pre id="view"></pre> 
<textarea id="code"></textarea>

當在#code鍵入它是複製的值，應用過濾器以及將所述HTML到#view。

var code = document.getElementById("code"); 
var pre = document.getElementById("pre"); 
(code).onkeyup = function(){ 
    val = this.value; 
    val = YourRegex(val); 
    (pre).innerHTML = val; 
};

YourRegex將匹配regex和一些分析的內容返回到pre，允許您自定義textarea的外觀的方法（實際上是一個元素在它）。

function YourRegex(val) 
{ 
    // This function add colors, bold, whatever you want. 
    if (/bbcc/i.test("bbcc")) 
     return "<b>" + val + "</b>"; 
}

來源

2010-09-27 16:41:16 BrunoLM

@ BrunoLM的解決方案非常出色，但可能需要比您更熟悉的更多黑客技術。如果你有興趣（如果jQuery是已經在你的籌碼），下面的插件可能是值得考慮看看：

http://garysieling.github.io/jquery-highlighttextarea/

來源

2013-12-21 00:02:24 rinogo

請問downvoter請提供一個原因，爲什麼這不是一個好的答案？對於「js新手」（原文如此），這似乎是一個合理的答案。 – rinogo 2016-05-24 00:19:29

爲了節省時間，你應該考慮使用現有的庫這一要求。從here

報價：

由於textarea元素無法呈現HTML，這個插件可以讓你突出textarea元素中的文本。

jQuery highlightTextarea。

演示：Codepen

用法：

$context.highlightTextarea(options);

來源

2016-05-21 14:26:52 dude

你可以考慮製作一個Stack Snippet而不是鏈接到Codepen。這樣，你可以直接在Stack Overflow上運行它。 – Tunaki 2016-05-21 17:30:47

朱利安，你應該透露這篇文章是你寫的。另外，我想指出的是，你推薦的特定插件與我在2013年指出的完全一樣...沒有什麼大不了的，但是可能會更加考慮向我的評論添加評論回答而不是downvoting我的答案，並添加自己的... – rinogo 2016-06-02 01:13:13

@rinogo這不是一個項目的推廣。我剛剛給文章命名，因爲有一個描述爲什麼不能使用普通的熒光筆庫。不過，我已經更新了我的答案，看起來不像是促銷活動。關於你的回答：當你提供一個可以解決問題的項目鏈接時，你不會提供一個例子（Codepen，JSFiddle，StackOverflow Snippet）或者一個用法示例。 – dude 2016-06-02 06:15:27

如何突出textarea html代碼的一部分

回答

相關問題