Python tutorial: Splitting method to solve overlapping position problem

Question

My goal is to split the overlapping positions for use in HTML. For example, I have this text:

One Two Three

I want the second and third words to be bold, and the first two words to be italicized. We get this result:

[
  { "start": 4, "end": 13, "markup": "BOLD" },
  { "start": 0, "end": 7, "markup": "ITALIC" }
]

If we wish to apply HTML tags by position, we get this result:

<bold>One <em>Two</bold> Three</em>

See the overlap? the opening tag is interrupted by the closing tag. It should look like this:

<bold>one<em>two</em></bold><em>three</em></ pre>
<p>and location: </p>
<pre class="brush:php;toolbar:false;">[
  { "start": 4, "end": 7, "markup": "BOLD" },
  { "start": 7, "end": 13, "markup": "BOLD" },
  { "start": 0, "end": 7, "markup": "ITALIC" }
]

P.S. Don't worry about the original position changing after applying the markup. I wrote a good solution.

I tried to implement some solutions but it seems to be a difficult task for me.

Answer 1

You can use the Javascript DomParser API to automatically fix the HTML structure

const res = (new DOMParser())
    .parseFromString(
        "<bold>One <em>two</bold> three</em>",
        "text/html"
    );
console.log(res.body.innerHTML)