JavascriptでHTMLタグを解析する

Question

私の仕事は、テキスト内のhtmlタグを解析することです。たとえば、
<upcase>text</upcase> to uppercase. <lowcase>text</lowcase> to lowercase <orgcase>text</orgcase> does not change casingです。
これらの3つのタグのみ。大文字と小文字を大文字/小文字に変換し、テキストをそのまま維持します。
'We are <orgcase>liViNg</orgcase> in a <upcase>yellow submarine</upcase>. We <orgcase>doN\'t</orgcase> have <lowcase>anything</lowcase> else.'
および予想される出力は次のようなものです：： は、だから私の入力がある
We are liViNg in a YELLOW SUBMARINE. We doN't have anything else.

私は私が行う必要があり、大文字と小文字だけのものとの事はこれだけのテキストタグを削除することですでした残っています。私はそれが私が求めているものではないという考えを持っています。私の質問は、すべての置換のための私のコードでは、置換されたテキストで新しい文字列が古いものと連結されている理由です。ここに私のコードです：

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']); 

そして、その例えば私の出力は次のようになります。それはすべての単一のタグ別々であるが、テキストに組み合わせるために働いている
<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

ことはありません。

Answer 1

次のスニペットを確認してください。これは開始に役立ちます。

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