通过JavaScript添加后，在从文本区域读取时保留选项卡

Question

在读取文本区域的值时，我遇到了保留制表符的问题。我按如下方式添加了选项卡：

$("#code-editor").keydown(function (e) {
    if (e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var $this = $(this);
        var value = $this.val();

        // set textarea value to: text before caret + tab + text after caret
        $this.val(value.substring(0, start)
                    + "\t"
                    + value.substring(end));

        // put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

        // prevent the focus lose
        e.preventDefault();
    }
});

选项卡被正确插入，并按预期显示在文本区域中。当我读取textrea的值并尝试用html格式替换to制表符时，问题就出现了。

$("#code-editor").keyup(function (e) {
        var value = $(this).val();
        //Do formatting
        var lines = value.split("\n");

        var newvalue = "";

        for (var i = 0; i < lines.length; i++) {
            lines[i].replace(/\t/g, "<span style='padding-left:3em'></span>");
            lines[i] += "<br />";
            newvalue += lines[i];
        }

        $('#editor-displayarea').html(newvalue);
    });

我发现在阅读文本区域时，标签似乎不会被保留。

有没有办法绕过这个问题，还是我采取了错误的方法？

谢谢。

更新:我已经尝试使用下面注释中所述的正则表达式的一些变体，但都没有用。

Answer 1

替换制表符时，不会存储值。尝试如下所示(我也会将 留在跨度中)：

for (var i = 0; i < lines.length; i++) {
    var replaced = lines[i].replace(/\t/g, "<span style='padding-left:3em'>&nbsp;</span>");
    replaced += "<br />";
    newvalue += replaced;
}