How to get innerText of a specific part (range, fragment) of HTML document? (I.e. not of the whole HTML element)

Question

#div2{
  text-transform:uppercase
}
#invisible{
  display:none
}

<div id='container'>
    <div id='div1'>
        <span>some text</span>
        <div>
            <span>some text</span>
            <div id='div2'>text2</div>
        </div>
    </div>
    <div id='invisible'>invisible text</div>
    <div id='div3'>text3</div>
</div>

Suppose I want to get the innerText of a part of the document from div2 to div3 inclusively, so I should get the following text value:

TEXT2
text3

How can I get that value?

I can select some part of HTML document via the Range object, but Range object does not have innerText property. (I'm talking about innerText, not textContent, because I want the extracted text to look identically to the rendered version in the browser, i.e. respecting the CSS properties like display, visibility, white-space, text-transform etc.)

Please visit the [help] to see what and [ask]. HINT: Post effort and CODE. — mplungjan, Apr 03 '20 at 18:21
You should show some HTML, really hard to grasp what you are asking. Like this is the html, and this is what the expected output should be. Simple example goes a long way. — epascarello, Apr 03 '20 at 18:21
@RuudHelderman No, I am asking about text representation (like innerText), not about HTML code (like innerHTML) — Grigory Hatsevich, Apr 03 '20 at 18:36
CSS does not physically delete or capitalize textual content. If `Range` would have an `innerText` property, it would be unaffected by CSS. CSS affects the way _HTML_ is rendered. HTML is the glue between text and CSS. No HTML, no styling. — Ruud Helderman, Apr 03 '20 at 20:32
@RuudHelderman mplungjan Why did you close my question as duplicate to "Get Selected HTML in browser via Javascript" despite that question clearly asks about different thing? (About getting HTML code, not text.) — Grigory Hatsevich, Apr 03 '20 at 20:39
My vote preceded your reply, but I still stand by [the proposed Q&A](https://stackoverflow.com/q/5083682/), as it should solve half of your problem (the other half being partly covered [here](https://stackoverflow.com/q/19985306/)). If you'd like your question to be reopened, then please follow these instructions: https://stackoverflow.com/help/reopen-questions — Ruud Helderman, Apr 03 '20 at 21:21
As of now, there is a new method which doesn't require HTML manipulation as in the linked-duplicate answer which I consider only as a workaround and not really a duplicate anyway. — Qwerty, Mar 23 '21 at 17:13

score -1 · Answer 1 · answered Apr 03 '20 at 18:40

If you want the inner text, you can use jQuery:

var div1 = $("#div1");
var div1Content = (div1.length === 0) ? "div1 was not found or some relevant error message" : div1.text();

// or if you are confident your div1 will exist:
var div1Content = $("#div1").text();

Or, JavaScript:

var div1Content = document.getElementById("div1")?.innerText ?? "div1 was not found or some relevant error message";

How to get innerText of a specific part (range, fragment) of HTML document? (I.e. not of the whole HTML element)

1 Answers1