如何突出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代码的一部分

回答

相关问题