CodeMirror Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<textarea id= "editor"></textarea>
<br>
<button id = "automatic1">for...in</button>
<button id = "automatic2">for...in that works</button>
<button id = "automatic3">forEach</button>
JavaScript
$(document).ready(function(){
var editorArea = document.getElementById("editor");
var editor = CodeMirror.fromTextArea(editorArea, {
lineNumbers : true
});
var array = [];
var temp = 0;
for (var i = 0; i<3; i++){
array[i] = [];
for (var j = 0; j<3; j++){
array[i][j] = ++temp + "";
if (j==2){
array[i][j+1] = "\n";
}
}
}
$("#automatic1").click(function(){
for (var row in array){
for (var col in array[row]){
console.log("text: " + array[row][col] + " line: " + row + " ch: " + col);
console.log(typeof(row));
editor.replaceRange(array[row][col], {line:row, ch:col});
}
}
});
$("#automatic2").click(function(){
for (var row in array){
for (var col in array[row]){
console.log("text: " + array[row][col] + " line: " + row + " ch: " + col);
var foo = row +1;
console.log(typeof(foo));
editor.replaceRange(array[row][col], {line:row+1, ch:col});
}
}
});
$("#automatic3").click(function(){
array.forEach(function (item, row) {
array[row].forEach(function (text, col) {
console.log("text: " + array[row][col] + " line: " + row + " ch: " + col);
console.log(typeof(row));
editor.replaceRange(text, {line:row, ch:col});
})
})
});
// just for kicks
/*$("#automatic2").click(function(){
for (var i = 0; i<array.length; i++){
for (var j = 0; j<array[i].length; j++){
editor.replaceRange(this.array[i][j], {line:i, ch:j});
}
}
});*/
});