如何高亮显示textarea中的部分HTML代码

Question

我想做一个类似于 Python 版本的网页正则表达式助手，但遇到了一个问题：如何在文本区域中用不同的颜色（在黄色和蓝色之间切换）来高亮显示匹配的值。这里有一个我想要的效果的示例，地址是 http://regexpal.com，但是我对 JavaScript 还是个新手，没能理解他的代码是什么意思。希望能得到一些建议。

Answer 1

@BrunoLM的解决方案很不错，但可能需要你动手的地方比较多，可能会让你觉得有点复杂。如果你感兴趣（而且你的项目中已经在用jQuery），那么下面这个插件可能值得你看看：

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

Answer 2

为了节省时间，你可以考虑使用一个现成的库来满足这个需求。

引用自 这里:

因为文本区域（textarea）无法显示HTML，这个插件可以让你在文本区域内高亮显示文本。

jQuery highlightTextarea。

演示: Codepen

使用方法:

$context.highlightTextarea(options);

Answer 3

在文本框上面有一个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中，这样你就可以自定义文本框的外观（实际上是一个覆盖在上面的元素）。

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