javascript - Javascript如何传递变量并设置颜色

我有两个文本区域

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

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

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

如何在JavaScript中做到这一点？谢谢

最佳答案

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

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>';

编辑：忘记了绿色部分。