我想实现一个python版本的web regexbuddy,我遇到一个问题,如何在textarea中突出显示不同颜色的匹配值(在黄色和蓝色之间切换),有一个演示我想要什么{{3但是我是js的新手,我不明白他的代码含义。 任何建议表示赞赏
答案 0 :(得分:2)
为了节省时间,您应该考虑使用现有的库来满足此要求。
引自here:
由于textarea元素无法呈现HTML,因此该插件允许您突出显示textarea元素中的文本。
演示: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已经在你的堆栈中),下面的插件可能值得一看: