Ersetzen eines Ausdrucks durch ein HTML-Tag

Question

Ich muss einen Text analysieren (der XML-Tags enthält) und dann einige dieser Tags für HTML-Spannen mit einer bestimmten Klasse ersetzen (um sie entsprechend zu formatieren). Ich kann das gut tun, wenn ich nur eine Klasse zur span-Ausgabe hinzufüge, aber wenn ich mehr als eine Klasse hinzufüge, bricht es vollständig.

Ich versuche, nicht zwei „Klasse“ erstellen Attribute (Ich weiß, dass dies nicht funktionieren würde), sondern ich bin nur zu verketten versuchen: "<span=\"en " + class + "<\"/span>", wo en die erste Klasse ist und class ist eine String-Variable .

Wenn ich diese en-Klasse nicht hinzufügen musste, habe ich diese \" nicht verwendet, ich setzte "<span= " + class + "</span>" einfach und es hat gut funktioniert. Ich bin nicht wirklich sicher, warum das funktionierte, da es für mich etwas wie "<span class=x> y </span> in HTML erzeugen würde, und das Klassenattribut würde nicht funktionieren (wegen der Abwesenheit von "), aber aus irgendeinem Grund funktioniert es (und ich würde Liebe zu verstehen, warum).

So wie ich diese <span> zum HTML hinzuzufügen, ist durch ersetzen:

text = text.replace(exp, t); 
document.getElementById("myid").innerHTML = text; 

Wo t ist, dass Verkettung ich oben erwähnt. Da ich mehr als ein XML-Tag zu ersetzen habe, wiederhole ich das in einer Weile bis (exp.exec(text) == null), obwohl ich glaube nicht, dass das Problem da ist.

Kann mir bitte jemand erklären, was ich vermisse? Ich verstehe JS nicht sehr gut und weiß nicht, was passieren könnte. Ich wollte eine Erklärung darüber, was die Implikationen dessen sind, was ich tue, weil es einen ganz anderen Teil meines Codes bricht ... Der Ersatz funktioniert immer noch (die Ausgabe ist <span class="en x"> y </span>, wie es sein sollte), aber dann ist da noch das Seltsame Teil.

Da die einzige Änderung, die ich machte, war von <span class="x"> y </span> bis <span class="en x"> y </span>, sollte dies keine andere Sache in meinem Code beeinflussen (ich werde erklären). Ich bin fest davon überzeugt, dass das etwas mit den gestrichenen Anführungszeichen zu tun hat, aber ich weiß nicht, wie ich das ohne sie machen könnte.

Der Teil, der bricht, ist: Ich habe einen Text in einem Textfeld eines Formulars geladen. Dieser Text ist ein XML. Es gibt einen "Visual Mode" -Button, der meine Funktion aktiviert (liest den gesamten Text, ersetzt die XML-Tags durch farbige Spannen). Alles ist in Ordnung. Aber dann kann der Benutzer zum Textbereich zurückkehren und den Inhalt des Textes bearbeiten, indem er beispielsweise mehr markierte Wörter hinzufügt. Und dann noch einmal auf "Visual Mode" klicken. Das Parsen lief gut, als ich nur eine Klasse hinzufügte.

Aber nachdem ich diese Änderung vorgenommen habe, erkennt das Parse die XML-Tags nicht und nimmt stattdessen den Text so wie er ist und fügt ihn ein! Dann bricht natürlich alles zusammen. Was ich nicht verstehe, ist, warum die Analyse nicht mehr funktioniert, weil ich keine Änderungen daran vorgenommen habe, wie sie den Text liest, sondern nur, wie er ihn ersetzt. Ich ersetze den Text nicht einmal an der Stelle, an der ich gelesen habe, also sollte eine Sache die andere nicht beeinflussen.

EDIT: Meine XML wie folgt aussieht:

<DOC DOCID="someid"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Aliquam at mauris <EM ID="someid" CATEG="somecateg">pellentesque </EM>, scelerisque purus condimentum, scelerisque purus. 
<EM ID="someid" CATEG="anothercateg">Mauris </EM>id libero vitae nulla fringilla vehicula. 
Integer varius <EM ID="someid" CATEG="somecateg">lorem in </EM>nibh hendrerit facilisis. 
Nulla porttitor dui a lacus euismod bibendum. 
Proin in arcu eu magna laoreet suscipit id eget quam. 
</DOC> 

Die XML-Inhalte zunächst in ein Textfeld (id "myid" im Code unten) und dann manipuliert nach geladen wird.

Was ich tue, ist:

var exp = /<EM (.*?) <\/EM>/; 
var text = document.getElementById("myid").value; 
while(exp.exec(text) != null) 
{ 
    var exp1 = /<EM ID=(.*?)<\/EM>/; 
    var text1 = exp1.exec(text); 
    var exp2 = /CATEG=\"(.*?)\"/; 
    var text2 = exp2.exec(text1[1]); 
    var categ = text2[1]; 
    var exp3 = /\">(.*?) <\/EM>/; 
    var text3 = exp3.exec(text); 
    var word = text3[1]; 
    var tag = "<span class="; 
    var tag2 = ">"; 
    var tag3 = "</span> "; 
    var t = tag + categ + tag2 + word + tag3; 
    text = text.replace(exp, t); 
} 
document.getElementById("myid2").innerHTML = text; 

So extrahieren ich die Informationen, die ich aus den Tags wollen und sie dann mit der entsprechenden Klasse für einen Zeitraum ersetzen, die dann entsprechend (via CSS) formatiert ist. Beachten Sie, dass alle Änderungen, die ich tue, nicht auf das Textfeld reflektiert werden, sondern dass sie in ein div gesetzt werden (id "myid2" im obigen Code). Alle Änderungen, die am Textbereich vorgenommen werden, spiegeln jedoch dieses div wider. So kann der Benutzer mehr Wörter (markiert oder nicht) hinzufügen oder etwas löschen.

Aber wie ich in meinem Beitrag erwähnt habe, ist das Problem, wenn ich versuche, zwei Kategorien zu setzen. Wie mein Code ist var tag = "<span class="; funktionieren gut, und das Problem tritt auf, wenn ich den Code zu ändern:

var tag = "<span class=\"en "; 
var tag2 = "\">"; 

was passiert ist, dass, wenn ich auf „Visual Mode“ -Taste, klicken Sie zuerst auf (die Taste, die meine Funktion auslöst) Alle Tags werden korrekt analysiert und formatiert. Wenn ich jedoch den Inhalt des Textfelds ändere und versuche, erneut auf Visual Mode zu klicken, bricht der Parser direkt nach dem Beginn meiner Änderungen ab. Es hört auf, die Tags zu erkennen und wirft einfach alle XML-Tags wie im Div. Da <em> selbst ein HTML-Tag ist, wird alles kursiv. Was ich nicht verstehen kann ist, warum das Hinzufügen der Anführungszeichen mein Parsing unterbrechen würde, weil ich nicht einmal von dem Div lesen würde, wo ich die Spannen hinzugefügt habe. Sie sind überhaupt nicht verwandt.

Answer 1

Per meinem Kommentar zweiten unter dem Original-Beitrag „Anstatt zu entkommen Zitate und solche, die Apostroph doppelte Anführungszeichen Methode verwenden. Einzel starten und in der Nähe outter die meisten innerhalb von für alle Kinder zu verdoppeln.“

statt:

var tag = "<span class=\"en "; 
var tag2 = "\">"; 

Beispiel:

var tag = '<span class="en "'; 
var tag2 = '>'; 

ich glaube, das über viele pro funktioniert gut Programmiersprachen.