javascript - 在 Javascript 中解析 HTML 标签

Question

我的任务是解析文本中的 html 标签。例如:
<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);