解析Javascript中的HTML標簽

Question

我的任務是解析文本中的html標簽。 例如：
<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 。
僅這3個標簽。 大寫和小寫將其轉換為小寫/大寫，而orgcase文本保持不變。 所以我的輸入是：
'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);