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 =＆＃34; function（）＆＃34;＆gt;

在[quote] [/ quote]
将黄色背景应用于找到的文字：背景颜色=＆＃39;＃ffc＆＃39;

...

（如果没有找到[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元素一样，为了突出显示它们，你应该创建一个大小相同的内存元素（font-您的文本区域的大小等），执行上述操作，计算生成的span元素的位置，而不是在textarea上的相应位置应用一些高光覆盖，如果窗口调整大小，请注意它们“跟进”......故事就是......

这是一个 jQuery插件来实现上述目的：
的 http://mistic100.github.io/jquery-highlighttextarea/

Answer 2

目前我正在研究两种方法：Highlight Text Inside a Textarea，它描述了这个插件是如何完成的：https://github.com/lonekorean/highlight-within-textarea

MediaWiki的语法高亮：source，description of approach。

他们都使用textarea后面的附加元素，使用相同的字体和位置来显示背景颜色。 Textarea背景是透明的。然后在编辑和滚动时同步内容并在textarea和后面的元素之间滚动。

以下是我的简化代码：https://codepen.io/bunyk-1472854887/full/RLJbNq/

荧光笔的核心逻辑是这样的（跳过一些细节）：

textarea.addEventListener('keyup', textUpdate);
textarea.addEventListener('scroll', scrollUpdate);

function textUpdate() {
    var html = html_escape(textarea.value);
    enter code here
    html = html.replace(/\[quote\](.*?)\[\/quote\]/g, '[quote]<span class="quote">$1</span>[/quote]');

    background.innerHTML = html;
}

function scrollUpdate() {
    background.scrollTop = textarea.scrollTop;
};

在textarea中的[quote] [/ quote]之间找到Javascript和higlight文本

2 个答案: