This is an answer for KaTeX and LaTeX(also for MathJax, but should remove inline-math delimeters since the parameter in \[lcr]lap is recognized as in math mode).
The following code is rendered using KaTeX.
Firstly, we should have a basic knowledge of \[lcr]lap. See the examples below.
|e\llap{abc}d|\\
|e\clap{abc}d|\\
|e\rlap{abc}d|

We can notice that they both set the width of its parameter to 0. And l c r lay the content left, center or right separately.
Based on this feature, we could have our answer.
First, create the first underbrace using \rlap, which will display with 0 width. And we use \phantom to let the underbrace have correct width and height.
\rlap{$
\underbrace{
\phantom{A + B + C}
}
$}

Though there's been an underbrace, its width is 0. So we could add the following content directly.
A +

Then, we should create the overbrace. Similarly, using \rlap and \phantom to make the overbrace, and filling the width literally.
\rlap{$
\overbrace{
\phantom{B + C + D}
}
$}
B + C +

Finally, do the same thing for the last underbrace.
\rlap{$
\underbrace{
\phantom{D + E}
}
$}
D + E

That's it!
Full code:
\rlap{$
\underbrace{
\phantom{A + B + C}
}
$}
A +
\rlap{$
\overbrace{
\phantom{B + C + D}
}
$}
B + C +
\rlap{$
\underbrace{
\phantom{D + E}
}
$}
D + E