Javascriptが非同期処理されてプログラムが思うように動かない

Question

Javascript初心者です。Monacaにてアプリを開発しています。
スマホ内に保存した画像ファイルを画面に表示させるために、画像URLをBLOB形式に変換し、変数「texthtml」へ追加しようとしているのですが上手くいきません。

下記のソースコードでは、変数「texthtml」内は空白になってしまいます。
関数「urledit」で行われているファイル操作の処理が「非同期」で行われているらしい事は分かっているのですが、具体的にどこを修正すれば良いのか分からずに困っています。

該当のソースコード

var imgn; //グローバル変数「imgn」

function createFile(dirEntry, fileData, fileName) {
（略）
  textArray = '<div class="shop01-p" style="background-image:url(KmEsb001-shop01.png);"></div>'; //ここでは1行だけにしていますが、実際の「textArray」は複数の行数があります。
  var texthtml = '';
  for (var i = 0; i < textArray.length; i++){
    if (textArray[i].match(/shop01-p/)) {
      var result = textArray[i].split(/(|)/);

      urledit(result[0],result[1],result[2]);
      //関数「urledit」から変数「imgn」を持ってきたい。
      //関数「urledit」でグローバル変数「imgn」を編集している。

      console.log( imgn ); //undefined
      texthtml += imgn;
    }else{
      texthtml += textArray[i];
    }
  }
（略）
}

function urledit(R0,R1,R2){
  requestFileSystem(LocalFileSystem.PERSISTENT, 0, 
    function(fileSystem){
      var dirEntry = fileSystem.root;
      var gUrl = dirEntry.toURL() + R1;
      console.log('data:' + gUrl );
      window.resolveLocalFileSystemURL(gUrl,
        function(fileEntry){
          fileEntry.file(function (file) {
          var reader = new FileReader();
          reader.onloadend = function() {
            var ifn = fileEntry.toURL();
            if (ifn.match(/.png/)) {
              var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
            }else{
              var blob = new Blob([new Uint8Array(this.result)], { type: 'image/jpeg' });
            }
            var urlurlurl = window.URL.createObjectURL(blob);
            imgn = R0 + '(' + urlurlurl + ')' + R2; //この変数「imgn」を関数「createFile」に渡したい。
            console.log( imgn ); //imgn='<div class="shop01-p" style="background-image:url(blob:file:///7490f2c1-52b1-44c2-a015-91508e1a3c3b);"></div>'
            return(imgn);
          };
          reader.readAsArrayBuffer(file);
        });
      }
    );
  });
}

基本的な部分で躓いているような気がするのですが、皆様のお力をお借りしたく存じます。
よろしくお願いします。

Comments

[sousuke]

urleditは編集していいんですか？

[JIT]

はい、編集しても構いません。

Answer 1

追記） 申し訳ありません。誤答でした。

//ここでは1行だけにしていますが、実際の「textArray」は複数の行数があります

（追記ここまで

---

基本的な部分で躓いているような気がする

文字列は添え字番号でアクセスすると、１文字の string になります。

var textArray = "hoge";
var textArray2 = [
 "hoge",
 "hogu"
];
console.log( textArray[0], textArray2[0] );// "h", "hoge"
console.log( textArray[1], textArray2[1] );// "o", "hogu"

ご質問のコード内では if (textArray[i].match(/shop01-p/)) が偽と評価されているはずです