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

Posted 2023-02-22

【中文标题】如何突出显示部分textarea html代码

【英文标题】：how to highlight part of textarea html code

【发布时间】：2011-04-17 17:53:24

【问题描述】：

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

【问题讨论】：

添加标签：javascript，这看起来是一个关于如何使用 javascript 突出显示文本区域的问题。

【参考方案1】：

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

引用here:

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

jQuery highlightTextarea.

演示：Codepen

用法：

$context.highlightTextarea(options);

【讨论】：

你可以考虑制作一个 Stack Snippet 而不是链接到 Codepen。这样就可以直接在 Stack Overflow 上运行了。

朱利安，你应该披露这篇文章是你写的。另外，我想指出的是，您推荐的特定插件与我在 2013 年指出的完全相同......没什么大不了的，但在我的评论中添加评论可能会更体贴回答而不是拒绝我的回答并添加您自己的...

@rinogo 这不是一个项目的推广。我刚刚命名了这篇文章，因为有一个描述为什么不能使用普通的荧光笔库。但是，我已经更新了我的答案，看起来不像是促销活动。关于您的回答：虽然您提供了一个可以解决问题的项目的链接，但您没有提供示例（Codepen、JSFiddle、*** Snippet）或使用示例。

【参考方案2】：

文本区域上有一个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>";

【参考方案3】：

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

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

【讨论】：

投反对票的人能否说明这不是一个好答案的原因？对于“js新手”（原文如此），这似乎是一个合理的答案。