Замена выражения тегом HTML

Question

Мне нужно разобрать текст (который содержит теги XML), а затем заменить некоторые из этих тегов для пространств HTML определенным классом (для его форматирования). Я могу сделать это хорошо, когда я добавляю только один класс в вывод span, но когда я добавляю несколько классов, он полностью ломается.

Я не пытаюсь создать два «класс» атрибуты (я знаю, что это не будет работать), вместо этого я просто пытаюсь конкатенация: "<span=\"en " + class + "<\"/span>", где en является первым классом и class переменной строки ,

Когда мне не нужно было добавлять этот класс en, я не использовал этот \", я просто положил "<span= " + class + "</span>", и он отлично работал. Я не совсем уверен, почему это сработало, поскольку для меня он генерирует что-то вроде "<span class=x> y </span> в HTML, и атрибут класса не будет работать (из-за отсутствия "), но по какой-то причине он работает (и я бы любите понимать, почему).

Как я добавить этот <span> в HTML через замену:

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

t Где что конкатенация я упоминал выше. Поскольку я заменяю более одного XML-тега, я повторяю это через некоторое время до (exp.exec(text) == null), хотя я не верю, что проблема существует.

Может кто-нибудь объяснить мне, что мне не хватает? Я не очень хорошо разбираюсь в JS и не знаю, что может произойти. Мне нужно объяснение о том, каковы последствия того, что я делаю, потому что он разбивает другую совершенно другую часть моего кода ... Замена все еще работает (вывод <span class="en x"> y </span>, как и должно быть), но тогда есть странная часть.

Поскольку единственное изменение, которое я сделал, было от <span class="x"> y </span> до <span class="en x"> y </span>, это не должно повлиять ни на какие другие вещи в моем коде (я объясню). Я твердо верю, что это как-то связано с этими экранированными кавычками, но я не знаю, как сделать эту работу без них.

Часть, которая ломается: У меня есть текст, загруженный в текстовое поле формы. Этот текст является XML. Существует кнопка «Визуальный режим», которая активирует мою функцию (читает весь текст, заменяет теги XML цветными интервалами). Все в порядке. Но тогда пользователь может вернуться в текстовое поле и отредактировать содержимое текста, добавив, например, более тегированные слова. И затем снова нажмите «Визуальный режим». Парсинг прошел отлично, когда я добавлял только один класс.

Но после того, как я сделал это изменение, синтаксический анализ не распознает теги XML и вместо этого просто берет текст как есть и вставляет его! Тогда, очевидно, все ломается. Я не понимаю, почему синтаксический анализ перестает работать, потому что я не внес никаких изменений в то, как он читает текст, просто о том, как он его заменяет. Я даже не заменяю текст на том же месте, откуда я читал, поэтому одно не должно влиять на другого.

EDIT: Мой XML выглядит следующим образом:

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

содержимое XML сначала загружается в текстовое поле (ID "MyId" в коде сильфона), а затем манипулировать после.

Что я делаю:

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; 

Так извлечь информацию, которую я хочу из тегов, а затем заменить их на промежуток с соответствующим классом, который затем отформатированный соответствующим образом (с помощью CSS). Обратите внимание, что все изменения, которые я делаю, не отражаются на текстовом поле, вместо этого они помещаются в div (id «myid2» в коде выше). Однако любые изменения, сделанные в textarea, отражают этот div. Таким образом, пользователь может добавить больше слов (с меткой или нет) или удалить что-либо.

Но, как я упоминал в своем посте, проблема в том, что я пытаюсь поставить две категории. Как мой код, var tag = "<span class="; работает нормально, и проблема возникает, когда я изменить код:

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

Что происходит, что при нажатии на кнопку «Визуальный режим» первый (кнопка, которая вызывает мою функцию) , все теги правильно разбираются и отформатируются, но если я вношу какие-либо изменения в содержимое текстового поля и снова пытаюсь нажать Visual Mode, синтаксический анализатор разрывается сразу после того, как начнутся мои изменения. Он перестает распознавать теги и просто бросает все теги XML, как в div. Поскольку <em> сам по себе является тегом HTML, все становится курсивом. Я не понимаю, почему добавление кавычек нарушит мой синтаксический анализ, потому что я даже не читаю из div, где я добавил промежутки. Они не связаны вообще.

Answer 1

За мой комментарий второго под оригинальным постом, «Вместо того, вылетающие цитаты и такие, используйте одинарную кавычку двойной метод котировки. Single начать и закрыть Outter наиболее дважды для всех детей в пределах.»

Вместо того, чтобы:

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

Пример:

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

Я считаю, что это прекрасно работает по многим про грамматические языки.