2

我想实现一个python版本的web regexbuddy，我遇到了一个问题，如何在textarea中突出显示不同颜色的匹配值（在黄色和蓝色之间切换）， http://regexpal上有一个我想要的演示。 com，但我是js的新手，我不明白他的代码含义。任何建议表示赞赏

替代文字

4

3 回答 3

2

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

从这里引用：

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

jQuery 高亮文本区域。

演示：Codepen

用法：

$context.highlightTextarea(options);
于 2016-05-21T14:26:52.090 回答
1

文本区域上有一个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-27T16:41:16.340 回答
0

@BrunoLM 的解决方案非常好，但可能需要比您感到舒服的更多黑客攻击。如果您有兴趣（并且如果 jQuery 已经在您的堆栈中），以下插件可能值得一看：

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

于 2013-12-21T00:02:24.477 回答