Javascript 在文本区域内的 [quote][/quote] 之间查找并突出显示文本

Question

我有这个带有预写信息的 HTML 代码。我的目标是在我聚焦/单击文本区域后，在黄色背景中突出显示 [quote] [/quote] 之间的文本。

<textarea>
This is a test message.

[quote]Wise man said he is wise.[/quote] There could be more quotes too:

[quote]this is second quote [/quote]

He is correct.
</textarea>

是否可以使用纯 Javascript 来实现？我认为它应该是这样的:

textarea onfocus="function()">

• 在[quote][/quote]之间查找文本
• 为找到的文本应用黄色背景:background Color='#ffc'

....

(如果没有找到 [quote] [/quote]，那么它应该什么也不做，即没有警告)。

Answer 1

因为您不能使用 <textatea> 来做到这一点我建议看一下

<div contenteditable>

</div>

举个例子:

var area = document.getElementById("area");
var text = area.innerHTML;

area.innerHTML = text.replace(/\[\s*quote.*\](.*)[^[]*\[\s*\/quote.*\]/ig, "<span>$1</span>");

[contenteditable]{
  white-space:pre-wrap;
}
[contenteditable] span{
  background:#ffc;
}

<div id="area" contenteditable>
This is a test message.

[quote]Wise man said he is wise.[/quote] There could be more quotes too:

[quote]this is second quote [/quote]

He is correct.
</div>

否则，因为您不能处理 textarea 中的 HTML 元素像实际的 HTML 元素一样以突出显示它们 → 你应该创建一个与你的文本区域具有相同大小(字体大小等)的内存元素，执行上述操作，计算生成的跨度元素的位置，而不是应用一些突出显示覆盖在文本区域上的各个位置上，注意如果窗口大小发生变化，它们会“跟进”……然后故事就……

这里有一个 jQuery 插件来实现上面提到的:
<强> http://mistic100.github.io/jquery-highlighttextarea/