Parse HTML Tags in Javascript

Question

My task is to parse html tags in a text. For example:
<upcase>text</upcase> to uppercase. <lowcase>text</lowcase> to lowercase <orgcase>text</orgcase> does not change casing.
Only these 3 tags. Upcase and low case transform it to lower/upper case and orgcase the text stays the same. So my input is:
'We are <orgcase>liViNg</orgcase> in a <upcase>yellow submarine</upcase>. We <orgcase>doN\'t</orgcase> have <lowcase>anything</lowcase> else.'
And the expected output is something like this:
We are liViNg in a YELLOW SUBMARINE. We doN't have anything else.

I did the thing with uppercase and lowercase but only thing i need to do is to delete the tags so only text is left. I have an idea for that so thats not what i am asking for. My question is why in my code for every replace a new string with replaced text is concatenated with the old one. Here is my 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']);

And for that example my output is:
<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

It is working for every single tag separately but combined in a text it is not.

No only javascript and this input should be passed in my function ParseTags() — user7460099
– user7460099, Commented Feb 3, 2017 at 8:45

Pugazh · Accepted Answer · 2017-02-03 11:39:18Z

2

Check the below snippet, this might help you get started.

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

edited Feb 3, 2017 at 11:39

answered Feb 3, 2017 at 9:08

Pugazh

9,5615 gold badges36 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user7460099 Over a year ago

Ok but why are you iterating in both for loops from 0 to upcase.length

Collectives™ on Stack Overflow

Parse HTML Tags in Javascript

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related