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

Javascript 如何突出显示部分textarea html代码,javascript,python,regex,highlight,regexbuddy,Javascript,Python,Regex,Highlight,Regexbuddy,我想实现一个python版本的web regexbuddy,我遇到了一个问题,如何在文本区域中突出显示不同颜色的匹配值(在黄色和蓝色之间切换),有一个演示我到底想要什么,但我是js的新手,我不理解他的代码含义。 任何建议都将不胜感激 文本区域上有一个pre元素。因此,当您键入任何内容时,它会复制pre元素上的输入,并应用一些过滤器 例如: <pre id="view"></pre> <textarea id="code"></textarea>

我想实现一个python版本的web regexbuddy,我遇到了一个问题,如何在文本区域中突出显示不同颜色的匹配值(在黄色和蓝色之间切换),有一个演示我到底想要什么,但我是js的新手,我不理解他的代码含义。 任何建议都将不胜感激


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

例如:

<pre id="view"></pre>
<textarea id="code"></textarea>
YourRegex
是一种匹配
regex
并将一些解析内容返回到
pre
的方法,允许您自定义
textarea
的外观(实际上是其上的一个元素)

函数YourRegex(val)
{
//此功能可添加颜色、粗体或任何您想要的颜色。
如果(/bbcc/i.test(“bbcc”))
返回“+val+”;
}

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


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

引自:

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

演示:

用法:

$context.highlightTextarea(options);

添加标签:JavaScript,这是一个关于如何使用JavaScript突出文本区域的问题。你可以考虑制作一个堆栈片段,而不是链接到CODEPTEN。这样,你可以直接在堆栈溢出上运行它。朱利安,你应该透露这篇文章是你写的。另外,我想指出,您推荐的特定插件与我在2013年指出的插件完全相同。。。没什么大不了的,但在我的答案中添加一条评论可能会比否决我的答案并添加你自己的…@rinogo这不是一个项目的推广。我刚刚命名了这篇文章,因为有一篇文章描述了为什么不能使用普通的highlighter库。然而,我已经更新了我的答案,使其看起来不像是升职。关于你的答案:当你提供一个项目的链接来解决这个问题时,你没有提供一个例子(Codepen、JSFiddle、StackOverflow Snippet)或一个使用示例。downvoter能提供一个为什么这不是一个好答案的原因吗?对于一个“js新手”(原文如此),这似乎是一个合理的答案。
function YourRegex(val)
{
    // This function add colors, bold, whatever you want.
    if (/bbcc/i.test("bbcc"))
        return "<b>" + val + "</b>";
}
$context.highlightTextarea(options);