Replace non-html and replace it with correct syntax

Question

I have a source program that delivers text with non html tags and incorrect syntax. for example:

the <H>quick</> brown fox.
the <U>quick</> brown fox.
<H><U>The</> quick brown fox.
<H><U>The</> quick </> brown fox.

The out come should be someting like:

the quick brown fox.

the quick brown fox.

The quick brown fox.

The quick brown fox.

So the tags used are not html-valid, but also not closed as they should. I'm struggling to get this working in javascript.

started with something like:

var s = document.getElementById('root').innerHTML;
s = s.replace("&lt;H&gt;", "<b>");  
s = s.replace("&lt;h&gt;", "<b>");    
s = s.replace("&lt;/&gt;","</b>");   
document.getElementById('root').innerHTML = s;

root is the all containing div. The tags will appier in a div with class "label components", there will be multiple divs with class "label components" (and thus multiple times the incorrect tags on a page).

how can I best tackle this?

Regular expressions are not great at parsing valid markup, so I'd imagine even worse for invalid markup. I think you'll probably have to write a small parser... — Robby Cornelissen
– Robby Cornelissen, Commented Jun 8, 2020 at 7:01
If you decide to go that route, this tutorial seems pretty good: medium.com/@gajus/… — Cat
– Cat, Commented Jun 8, 2020 at 7:13

Robby Cornelissen · Accepted Answer · 2020-06-08 07:39:34Z

Probably easiest to write a small parser/processor that uses a stack to keep track of the tags that still need to be closed:

const s1 = 'the <H>quick</> brown fox.';
const s2 = 'the <U>quick</> brown fox.';
const s3 = '<H><U>The</> quick brown fox.';
const s4 = '<H><U>The</> quick </> brown fox.';

const process = (s) => {
  const map = {'H': 'b', 'U': 'i'};
  const stack = [];
  
  return s.replace(/<([A-Z/])>/g, (_, t) => {
    if (map[t]) {
      stack.push(map[t]);
      return `<${map[t]}>`;
    } else {
      return `</${stack.pop()}>`;
    }
  });
};

console.log(process(s1));
console.log(process(s2));
console.log(process(s3));
console.log(process(s4));

Your third example still comes out to be invalid HTML, because of the fact that the number of opening and closing tags doesn't match. If that's more than just a mistake in your example, you'll be looking at a more complex solution, and would need to specify what the desired behavior is supposed to be.

Zeni · Accepted Answer · 2020-06-08 07:32:13Z

-2

In my opinion the best route in this case would be to open html document in editor like VS Code and use find and replace tool. You should also use HTMLHint extension for VS Code to highlight all the problems in html document.

answered Jun 8, 2020 at 7:32

Zeni

1,0051 gold badge15 silver badges31 bronze badges

1 Comment

Koen Steenhout Over a year ago

The source tool is providing the data. The solution should by dynamic. So doing a manual find/replace is not the solution.

Collectives™ on Stack Overflow

Replace non-html and replace it with correct syntax

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related