如何突出显示部分文本区域html代码

Question

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

Answer 1

文本区域上方有一个pre元素。因此，当您键入任何内容时，它将复制pre元素上的输入，并应用一些过滤器。在

例如：

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

当您在#code上键入时，它正在复制值、应用筛选器并将HTML添加到#view。在

^{pr2}$

YourRegex将是一个匹配regex并将一些已解析内容返回给pre的方法，允许您自定义textarea（实际上是它上面的一个元素）的外观。在

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

Answer 2

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

引自here：

As textarea elements can’t render HTML, this plugin allows you to highlight text inside textarea elements.

jQuery highlightTextarea。在

演示：Codepen

用法：

$context.highlightTextarea(options);

Answer 3

@BrunoLM的解决方案很好，但是可能需要比你所能接受的更多的黑客攻击。如果您感兴趣（如果jQuery已经在您的堆栈中），下面的插件可能值得一看：

{a1}