Parse HTML-Tags in Javascript

Question

Meine Aufgabe besteht darin, HTML-Tags in einem Text zu analysieren. Zum Beispiel:
<upcase>text</upcase> to uppercase. <lowcase>text</lowcase> to lowercase <orgcase>text</orgcase> does not change casing.
Nur diese 3 Tags. Upcase und Low Case transformieren sie in Groß-/Kleinbuchstaben und der Text bleibt gleich. Also meine Eingabe ist:
'We are <orgcase>liViNg</orgcase> in a <upcase>yellow submarine</upcase>. We <orgcase>doN\'t</orgcase> have <lowcase>anything</lowcase> else.'
Und die erwartete Ausgabe ist so etwas wie folgt aus:
We are liViNg in a YELLOW SUBMARINE. We doN't have anything else.

Ich habe die Sache mit Groß- und Kleinschreibung, aber nur, was ich zu tun ist, müssen die Tags so nur Text löschen bleibt übrig. Ich habe eine Idee dafür, das ist nicht das, wonach ich frage. Meine Frage ist, warum in meinem Code für jeden Ersatz eine neue Zeichenfolge mit ersetztem Text mit der alten verkettet wird. Hier ist mein Code:

function ParseTags(args) { 
    let text = args[0], 
    i, 
    len = text.length, 
    replaced = '', 
    indexOfClosingTag, 
    indexOfSlash, 
    sub = ''; 


for (i = 0; i < len; i += 1) { 
    if (text[i] === '<') { 
     if (text[i + 1] === 'u') { 
      indexOfClosingTag = text.indexOf('>', i + 1); 
      indexOfSlash = text.indexOf('/', indexOfClosingTag); 
      sub = text.substring(indexOfClosingTag + 1, indexOfSlash - 1); 
      replaced += text.replace(sub, sub.toUpperCase()); 

     } 

     if (text[i + 1] === 'l') { 
      indexOfClosingTag = text.indexOf('>', i + 1); 
      indexOfSlash = text.indexOf('/', indexOfClosingTag); 
      sub = text.substring(indexOfClosingTag, indexOfSlash - 1); 
      replaced += text.replace(sub, sub.toLowerCase()); 

     } 

     if (text[i + 1] === 'o') { 
      indexOfClosingTag = text.indexOf('>', i + 1); 
      sub = text.substring(i, indexOfClosingTag + 1); 
      replaced += text.replace(sub, ''); 

      let indexOfNextOpening = text.indexOf('<', indexOfClosingTag); 
      indexOfClosingTag = text.indexOf('>', indexOfNextOpening); 
      sub = text.substring(indexOfNextOpening, indexOfClosingTag + 1); 
      replaced += text.replace(sub, ''); 

     } 

    } 

} 
console.log(replaced); 
} 
ParseTags(['<upcase>text</upcase> to uppercase. <lowcase>TEXT</lowcase> to lowercase <orgcase>tExt</orgcase> does not change casing']); 

Und für dieses Beispiel meine Ausgabe lautet:
<upcase>TEXT</upcase> to uppercase. <lowcase>TEXT</lowcase> to lowercase <orgcase>tExt</orgcase> does not change casing<upcase>text</upcase> to uppercase. <lowcase>text</lowcase> to l owercase <orgcase>tExt</orgcase> does not change casing<upcase>text</upcase> to uppercase. <lowcase>TEXT</lowcase> to lowercase tExt</orgcase> does not change casing<upcase>text</upca se> to uppercase. <lowcase>TEXT</lowcase> to lowercase <orgcase>tExt does not change casing

Es wird für jeden einzelnen Tag arbeiten separat, sondern in einem Text kombiniert es nicht ist.

Answer 1

Überprüfen Sie das folgende Snippet, dies könnte Ihnen beim Einstieg helfen.

var div = document.createElement("div"); 
 
div.innerHTML = 'We are <orgcase>liViNg</orgcase> in a <upcase>yellow submarine</upcase>. We <orgcase>doN\'t</orgcase> have <lowcase>ANYthing</lowcase> else.'; 
 

 
var upCase = div.getElementsByTagName("upcase"); 
 
for (var i = 0; i < upCase.length; i++) { 
 
    upCase[i].innerHTML = upCase[i].innerHTML.toUpperCase(); 
 
} 
 

 
var lowCase = div.getElementsByTagName("lowcase"); 
 
for (var i = 0; i < lowCase.length; i++) { 
 
    lowCase[i].innerHTML = lowCase[i].innerHTML.toLowerCase(); 
 
} 
 

 
div.innerHTML = div.innerHTML.replace(/<upcase>|<\/upcase>|<lowcase>|<\/lowcase>|<orgcase>|<\/orgcase>/gi, ''); 
 

 
console.log(div.innerHTML);