Javascript Generierung Anker Zitat Ausgabe

Question

Ich bin neu auf dieser Seite und neu in Javascript, aber ich bin in C für einige Jahre codiert, und ich lief in ein Problem, das mir völlig durch den Kopf geht.

Ich möchte ein Werkzeug für mich selbst (ein sehr einfaches Code-Generator-Tool) machen. Ich möchte HTML-Code generieren und auf anzeigbare Weise, da das Endprodukt eine statische Seite (kein Javascript) wäre. Also habe ich versucht, es mit grundlegenden String-Manipulation zu lösen.

Die Aufgabe und der Code ist so einfach, ich werde es nur hier posten. Javascript mit es entspricht tags:

<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>

Der Eingang:

https://drive.google.com/uc?id=0B3ju3vX1o4OuY0RaaDJKWnlRN1U + Titel + desc https://drive.google.com/uc?id=0B3ju3vX1o4OuSC1hNFQwUV9IWlE + title2 + desc2

Und die Ausgabe nach dem Ausführen des Skripts:

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

Es ist wie etwas automatisch Zitate um die Links setzen. Entschuldigung, ich habe so viele Dinge ausprobiert, an die ich mich jetzt nicht erinnern kann, aber wie ich mich erinnere, passiert das "automatische Zitat" nur mit Links und es verursacht alle möglichen Probleme im resultierenden Code (zum Beispiel das '/' rutscht darin) Die Zitate). Und alle anderen Probleme wurden durch dieses Verhalten verursacht (ich kann Titel und andere Attribute innerhalb des img Etiketts nicht zuweisen).

Zusätzliche 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> 

Vielen Dank für Hinweise im Voraus!

EDIT: entfernt das irreführende WOW-Ding. Das gewünschte Ergebnis ist einfach ein gültiger HTML-Bildcode.

Answer 1

Ändern Sie diese Zeile

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

dieser

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

auch können Sie die Ausrufezeichen urlencode, wenn sie ein Problem sind:

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

Answer 2

Sorry für die späten Follow-up , aber es stellte sich heraus, dass das Schreiben auf die innere HMTL das Problem verursachte (ich bin mir immer noch nicht sicher, ob das Schreiben in innerHTML etwas hat) Die Art der obskuren Code-Fixierungs-/Vervollständigungsfunktion. Wenn ich den HTML-Code in einer separaten Variablen ansehe, dann weist THEN den inneren HTML-Code keine Probleme auf.

Ich weiß, dass es nicht die beste Vorgehensweise ist, dynamischen Code wie diesen zu erstellen (die Elemente werden nicht zum DOM-Baum hinzugefügt), aber für meinen Gebrauch ist es einfacher, den Code auf diese Weise zu erstellen, da es nur ein Werkzeug ist für mich, statische Seiten zu generieren.