用HTML標記替換表達式

Question

我需要解析一個文本（包含XML標記），然后用特定的類替換HTML跨度的某些標記（以對其進行格式化）。 當我僅將一個類添加到span輸出中時，我可以做得很好，但是當我添加多個類時，它將完全中斷。

我不是要創建兩個“類”屬性（我知道這是行不通的），而是要串聯： "<span=\\"en " + class + "<\\"/span>" ，其中en是第一類，而class是字符串變量。

當我不必添加此en類時，我沒有使用此\\" ，我只是簡單地輸入了"<span= " + class + "</span>" ，它就可以正常工作。我不確定為何起作用，因為對我來說，它將在HTML中生成類似"<span class=x> y </span>的東西，並且class屬性不起作用（由於缺少" ），但是由於某種原因，它可以起作用（我很想知道為什么）。

我將此<span>添加到HTML的方法是通過替換：

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

我在上面提到的t是那個級聯。 由於我要替換多個XML標記，因此我會(exp.exec(text) == null)進行迭代直到(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標記，而是直接按原樣粘貼文本！ 然后顯然一切都崩潰了。 我不明白的是為什么解析會停止工作，因為我沒有更改其讀取文本的方式，僅更改了其替換方式。 我什至沒有替換我閱讀時所在位置的文本，因此一件事不應該影響另一件事。

編輯：我的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內容加載到textarea（在下面的代碼中為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）。 請注意，我所做的所有更改都不會反映在textarea上，而是將它們放在div中（上面的代碼中的id為“ myid2”）。 但是，對文本區域所做的任何更改均會反映在該div上。 因此，用戶可以添加更多單詞（帶或不帶標簽）或刪除任何內容。

但是正如我在帖子中提到的那樣，問題是當我嘗試放入兩個類別時。 正如我的代碼所示， var tag = "<span class="; 運行正常，當我將代碼更改為：

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

發生的情況是，當我首先單擊“可視模式”按鈕（觸發我的功能的按鈕）時，所有標記均已正確解析和格式化，但是如果我對文本區域的內容進行了任何更改並嘗試單擊“可視模式”同樣，解析器會在我的編輯開始后立即中斷。 它停止識別標簽，只是像div一樣拋出所有XML標簽。 由於<em>本身是HTML標記，因此所有內容都變為斜體。 我不明白的是為什么加上引號會破壞我的解析，因為我什至沒有從添加跨度的div中讀取內容。 它們根本不相關。

Answer 1

根據我在原始帖子下的第二句話，“ 不要使用單引號，雙引號方法來轉義引號，而應使用單引號和雙引號，對於所有內在子項，最重要的是加倍。 ”

代替：

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

例：

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

我相信這在許多編程語言中都可以正常工作。