テキストエリアの値を読み取るときにタブ文字を保持する際に問題が発生します。次のようにタブを追加しています。
$("#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形式のタブ文字に置き換えようとすると問題が発生します。
$("#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);
});
textareaから読み取るときに、タブが保持されていないように見えることを発見しました。
これを回避する方法はありますか、それとも間違ったアプローチを取りましたか?
ありがとう。
更新:以下のコメントに記載されているように、正規表現にいくつかのバリエーションを使用してみましたが、役に立ちませんでした。