在文本区域中突出显示简单的 Javascript？
Posted
技术标签:
【中文标题】在文本区域中突出显示简单的 Javascript？【英文标题】：Simple Javascript highlighting in a text area? 【发布时间】：2012-05-08 01:12:45 【问题描述】：我有两个简单的文本区域，我想在其中突出显示正在编写的 javascript 代码。 一旦用户在文本区域键入功能，关键字等必须以不同的颜色显示。
我试图破解这个 script 。但无法得到我想要的。
【问题讨论】：
【参考方案1】：您可以查看Ace (demo) 和CodeMirror (demo)。
我想Textarea that can do syntax highlighting on the fly? 和Online Code Editor 的问题也会对你有用。
【讨论】：
【参考方案2】：因为文本区域不能包含标记，所以不能突出显示本身。我用于内联拼写检查器的方法是为拼写错误的单词覆盖 div。这是可能的，因为可以获得文本中单词的 x 和 y 位置。
但是，最好使用内容可编辑的 div 覆盖 textarea，这将允许您将内容包装在 span 等中，然后应用样式。
【讨论】：
【参考方案3】：我认为您可以使用带有内容可编辑属性的 div 或 section 标签。在此 div 或部分中，您可以为高亮函数、变量等使用附加标记。但此属性仅适用于支持 html5 属性内容可编辑的新浏览器。这是demo
如果你需要一个简单的 js highligter，可能这个https://github.com/cloudhead/hijs 对你的任务有用
【讨论】：
【参考方案4】：我一直对textarea 元素感兴趣，这些元素具有代码高亮等附加功能，同时仍保留为简单的可编辑文本区域。我在这里做了一点实验：http://www.dcc.uchile.cl/~jmunoz/
它远非最佳且有很多错误，但仍然......它允许使用任意规则突出显示文本。我曾经有一个允许更改文本颜色（而不仅仅是背景）的工作版本，但它有一些问题。
基本上我所做的是添加一个div 覆盖，其内容和字体样式与文本区域完全相同，但字体透明。里面的文字有span元素包裹了某些可能有特殊背景、边框等的单词和短语。
为了允许不同的字体颜色，我尝试让textarea 文本透明，同时显示覆盖div 文本。主要问题是光标也变得透明了。
我会说使用带有可编辑内容的div 似乎是一个更好的选择。
【讨论】：
这正是我想要的。我会玩一会儿你的代码。 我还能拿到赏金吗？哈哈。但实际上，不要太相信那些代码，那时我是一个经验不足的程序员。你可以用它做任何你想做的事情，但如果我是你，我只会将它用作参考并从头开始构建它。 我希望你能得到大声笑。我是从头开始创建的，只是我需要一些简单的基本代码来开始并为它创建一个合适的库:)以上是关于在文本区域中突出显示简单的 Javascript？的主要内容，如果未能解决你的问题，请参考以下文章