String manipulation javascript

Question

I am trying to figure out how to manipulate string like this:

string abc = "<p> Hello world <em> How are you? </em> abc <em> You there </em> </p>"

into

string def = "<p> Hello world </> <em> How are you? </> <p> abc </> <em> You there </>"

Explanation: For every tag the closing tag will be </> this and I am not allowed to use nested tags as we do in normal HTML. That's why my string def has </> after every opening tag.

<p> hello world </> (tag closed) <em> how are you? </> (em tag closed) <p> abc </> (p tag closed) <em> You there </> (em tag closed)

I tried using exec on regex to find HTML closing tags and replace them with </>. It worked but unfortunately, I couldn't figure out how to work with opening tags.

I also tried splitting a string using space ' ' and looping through the array. But no luck.

Can anyone please guide me through this?

Is your string supposed to result in valid HTML? Because I'm not clear on what all those closing tags (</>) are supposed to represent. Furthermore, you don't even properly quote the initial string, which makes your goal here even more puzzling. — Marc
– Marc, Commented Oct 25, 2020 at 15:59
No not in valid HTML, I am receiving it in valid HTML (string abc) but I have convert that into string def. For every tag the closing tag will be </> this. and I am not allowed to use nested tags as we do in normal HTML. Thats why my string def has </> after every opening tag. hello world </> (tag closed) how are you? </> (em tag closed) abc </> (p tag closed) You there </> (em tag closed) — Mohammad Amin
– Mohammad Amin, Commented Oct 25, 2020 at 16:20
can you please explain the behavior you want because currently, abc is not valid HTML(no closing p tag) and by just seeing the def, we are not able to guess the pattern you want. — Raghav Garg
– Raghav Garg, Commented Oct 25, 2020 at 16:24
Oh sorry typo. The last tag is actually closing p tag. My bad. — Mohammad Amin
– Mohammad Amin, Commented Oct 25, 2020 at 16:26
Dude... you keep changing the question. Please let us know when the question you've typed is actually the one you're asking. — Marc
– Marc, Commented Oct 25, 2020 at 16:33

Raghav Garg · Accepted Answer · 2020-10-25 18:15:33Z

2

Using regex in this case would be quite difficult, we can split the the array over " " and simply loop over it and decide the current state of the string and tags.

function changeHTMLEndTags(html_string = "") {
    // adding a space before '<' and after '>'
    html_string = html_string.replace(/(<)/g, ' <').replace(/(>)/g, '> ');

    // removing multiple spaces introduced due to above operation
    // and triming the start and end of the string
    html_string = html_string.replace(/\s\s+/g, ' ').trim();

    html_string_words = html_string.split(" ");
    
    final_html_string = "";
    
    last_opening_tag = null;
    
    for(i = 0; i < html_string_words.length; ++i) {
        
        current_word = html_string_words[i];
        
        // if the current_word is an opening tag
        if (current_word.match(/<\w+>/)) {
            if (last_opening_tag === null) {
                final_html_string += current_word + " ";
                last_opening_tag = current_word;
            }
            else {
                final_html_string += "</>" + " " + current_word + " ";
                last_opening_tag = current_word;
            }
        }
        
        // if the current_word is a closing tag
        else if (current_word.match(/<\/\w+>/)) {
            if (last_opening_tag !== null) {
                final_html_string += "</>" + " ";
                last_opening_tag = null;
            }
            else {
                // do nothing with the current_word,
                // let it get swallowed, we want to drop the dangling closing tags
            }
        }
        
        // else the current_word is a normal word
        else {
            if (last_opening_tag !== null) {
                final_html_string += current_word + " ";
            }
            else {
                // I took assumption here, 
                // that if we don't have any opening tag, we will use `<p>`
                final_html_string += "<p>" + " " + current_word + " ";
                last_opening_tag = "<p>";
            }
        }
    }
    
    return final_html_string.trim();
}

abc = "<p> Hello world <em> How are you? </em> abc <em> You there </em> </p>";
console.log(changeHTMLEndTags(abc));

abc = "<p> Hello world<em> How are you? </em> abc <em> You there </em> </p>";
console.log(changeHTMLEndTags(abc));

edited Oct 25, 2020 at 18:15

answered Oct 25, 2020 at 16:52

Raghav Garg

3,7072 gold badges26 silver badges33 bronze badges

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

3 Comments

Mohammad Amin Over a year ago

Raghav Garg - The only problem is if my string looks like: abc = " Hello world How are you? abc You there "; Means there is not space before opening tag world. Apart from that it works like a charm.

Raghav Garg Over a year ago

changed the code to handle this case as well, please check it out.

Mohammad Amin Over a year ago

You are a champ!

Marc · Accepted Answer · 2020-10-25 16:50:06Z

0

There might be a fancier way to do this, but this works to replace  and  with </>, which seems to be your goal (despite the inconsistencies in your question and sample output).

let string = "<p> Hello world <em> How are you? </em> abc <em> You there </em> </p>";
let def = string.replace(/<\/(em|p)>/g, "</>");
console.log(def);

edited Oct 25, 2020 at 16:50

answered Oct 25, 2020 at 16:31

Marc

11.6k2 gold badges40 silver badges48 bronze badges

1 Comment

Mohammad Amin Over a year ago

That wasn't useful, Well Thanks.

Collectives™ on Stack Overflow

String manipulation javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related