Javascript如何传递变量和设置颜色

Question

我有两个文本区域

<textarea id="area1">Hello how are you</textarea>
<textarea id="area2"></textarea>

我想将area1值传递给area2并显示，然后将“Hello”设置为红色，“how are you”设置为绿色

var area1=document.getElementById("area1");
var area2=document.getElementById("area2");

如何在 JavaScript 中执行此操作？谢谢

Answer 1

要传输文本，您可以使用 textarea 的 innerHTML 属性:

area2.innerHTML = area1.innerHTML;

这是一个jsFiddle为此。

但是对于红色部分，难度会更大。

您将无法为此使用 2 个 textarea。您必须创建另一个容器并将其样式设置为 textarea。

这是一个快速solution第二个元素是 div 而不是 textarea。

不过我没有设置第二个元素的样式。

var area1=document.getElementById("area1");
var area2=document.getElementById("area2");
var regex = /Hello/g;

area2.innerHTML = area1.innerHTML.split(regex)
                    .join('<span style="color:red;">Hello</span><span style="color:green;">')
                    + '</span>';

编辑:忘记绿色部分。