在textarea中突出显示行

Question

我有一个textarea用于检查有效的电话号码。我想突出显示包含无效电话号码的行。我有逻辑把两个开始放在无效数字前面。

我不知道如何在textarea中突出显示整行（行）。

我做的是：

var tarea = $("textarea[id='myId']");
var lines = tarea.val().split('\n');
tarea.val(" ");
for (var i = 0; i < lines.length; i++) {
    if (lines[i].startsWith("**")) {
        var tempText = '<mark style="background-color:red;">' + lines[i] + '</mark>';
        tarea.append(tempText);
        tarea.append('\n');
    } else {
        tarea.append(lines[i]);
        tarea.append('\n');
    }
}

上面的代码只突出显示字符串，而不是整行。请帮我修改代码以突出显示该行。

---------------------编辑------------------------- ---

以上解决方案仅适用于IE。任何人都可以帮助它在Chrome和FF中运行吗？

在Chrome和FF中，完成上述操作后，textarea为空。我检查过tarea.val（）是＆＃34; ＆＃34;和tarea.html（）与标签和所有文本一起使用。但它并没有在textarea中显示出来。

Answer 1

尝试使用pre元素并将contentEditable设置为true，将mark元素display设置为block

＆＃13;

＆＃13;

pre {
  font-family:sans;
  width:400px;
}

mark {
  background:red;
  display:block;
}

＆＃13;

<pre contentEditable="true">
+1234567890
<mark>abcdefghij</mark>
</pre>

＆＃13;

＆＃13;

＆＃13;