JavaScript生成アンカー見積もり問題

Question

私はこのサイトを初めて利用していますが、JavaScriptには新しく書いてありますが、私はC言語で数年間コーディングしています。

自分でツールを作成したい（非常に簡単なコード生成ツール）。最終的な製品は静的なページ（javascriptなし）になるので、HTMLコードを生成して表示可能にしたい。だから私は基本的な文字列操作でそれを解決しようとしました。

タスクとコードはとてもシンプルですが、ここに投稿します。

<script> 
 
function ConvertListToGallery() 
 
{ 
 
    var cont = document.getElementById("gallery_generator_input"); 
 
    var eof_link; 
 
    var eof_title; 
 
    var eof_descr; 
 
    var lines = []; 
 
    var tokens = []; 
 
    var i, k; 
 
    var result = document.getElementById("gallery_generator_output"); 
 
    var link; 
 
    var lofasz = []; 
 

 
    if(cont) 
 
    { 
 
     lines = cont.value.split('\n'); 
 

 

 
     lofasz = cont.value.split('"'); 
 

 
     console.log(lofasz[0]); 
 

 
     result.innerHTML = ""; 
 
    
 
     for(i = 0; i < lines.length; i++) 
 
     { 
 
      tokens = lines[i].split(" + "); 
 
      for(k = 0; k < tokens.length; k++) 
 
      { console.log(tokens[k]); } 
 

 
      link = tokens[0]; 
 

 
      result.innerHTML += '<img src=' + link + '/>'; 
 
     } 
 
     document.getElementById("gallery_generator_result").value=result.innerHTML; 
 

 
     document.getElementById("gallery_convert").innerHTML = "Done!"; 
 
     document.getElementById("gallery_convert").onclick = ""; 
 
    } 
 

 
} 
 
</script>

入力：それで Javascriptが対応するタグです

https://drive.google.com/uc?id=0B3ju3vX1o4OuY0RaaDJKWnlRN1U +タイトル+ DESC https://drive.google.com/uc?id=0B3ju3vX1o4OuSC1hNFQwUV9IWlE + TITLE2 + desc2

そしてスクリプトを実行した後の出力：

<img src="https://drive.google.com/uc?id=0B3ju3vX1o4OuY0RaaDJKWnlRN1U/"><img src="https://drive.google.com/uc?id=0B3ju3vX1o4OuSC1hNFQwUV9IWlE/"> 

リンクの周りに自動的に引用符を付けるようなものです。申し訳ありませんが、私は今思い出すことができないほど多くのことを試みましたが、この "自動クォート"はリンクでのみ起こり、結果のコードではあらゆる種類の問題を引き起こします（たとえば、 '/引用符）。他のすべての問題は、この動作によって引き起こされました（私はimgタグ内にタイトルと他の属性を割り当てることはできません）。

追加のHTML：

<form> 
    <textarea id="gallery_generator_input" style = "width:800px;"></textarea></form> 

    <div id="gallery_generator_output" style="border:solid; max-height:500px; overflow:auto;"> 
    </div> 

    <textarea id="gallery_generator_result" style = "width:800px;"></textarea> 

<div onclick = "ConvertListToGallery();" id="gallery_convert">Convert!</div> 

は、事前に任意のヒントをありがとう！

EDIT：誤解を招くWOWの問題を削除しました。 希望の結果は、単に有効なHTMLイメージコードです。この

result.innerHTML += '<img src="' + link + '!!WOW"/>'; 

へ

Answer 1

変更このライン

result.innerHTML += '<img src=' + link + '!!WOW>'; 

、彼らが問題である場合も、あなたは感嘆符をURLENCODEことができます。

result.innerHTML += '<img src="' + link + '%21%21WOW"/>'; 

後半のフォローアップのために申し訳ありません

Answer 2

しかし、innerHMTLに書き込むことで問題が発生していることが判明しました（innerHTMLへの書き込みにsomがあるかどうかはまだ分かりませんあいまいなコードの修正/補完機能）。別の変数にHTMLを累積すると、それをinnerHTMLに割り当てるのに問題はありません。

私はそれが（DOMツリーに要素が追加されないような）動的なコードを作るのがベストプラクティスではないことを知っていますが、私の使用のためには、コードをこのようにするのが簡単です静的ページを生成する