如何突出显示部分textarea html代码

时间:2010-09-27 12:11:05

标签: javascript python regex highlight regexbuddy

我想实现一个python版本的web regexbuddy,我遇到一个问题,如何在textarea中突出显示不同颜色的匹配值(在黄色和蓝色之间切换),有一个演示我想要什么{{3但是我是js的新手,我不明白他的代码含义。 任何建议表示赞赏

alt text

3 个答案:

答案 0 :(得分:2)

为了节省时间,您应该考虑使用现有的库来满足此要求。

引自here

  

由于textarea元素无法呈现HTML,因此该插件允许您突出显示textarea元素中的文本。

jQuery highlightTextarea

演示:Codepen

用法:

$context.highlightTextarea(options);

答案 1 :(得分:1)

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>"; } 一个元素)。

{{1}}

答案 2 :(得分:0)

@ BrunoLM的解决方案非常出色,但可能需要更多的黑客攻击。如果你有兴趣(如果jQuery已经在你的堆栈中),下面的插件可能值得一看:

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