Copy rectangular selection in web browser from HTML element with numerous nested levels of descendants?

Question

I have HTML <pre> elements containing 160 columns by 62 rows of text; terminal screen captures, set in a monospace font. The text is marked-up by various <span> elements; for example, to set text color, background color, font weight, underlining; and also class names that encapsulate meta data about the content, not necessarily display attributes. The <span> elements can be nested to arbitrary levels.

I want a "cropped" version of that original 160x62 <pre> element; a rectangular selection from the original, retaining the <span> markup.

I don't want to capture the rectangular selection as a bitmapped screenshot. I want to keep the content as HTML.

In a web browser, I want to marquee-select a rectangular area of text in the original 160x62 <pre> element, and then get a <pre> element that represents that "crop" area (for example, 30x30; whatever the dimensions of the selection might be).

The cropped <pre> must preserve all of the formatting, all of the "active" <span> elements, of that area in the original <pre>.

For each row of the selected rectangular area, the software that creates the cropped <pre> must recognize which <span> elements are open in the original <pre> at the left edge of the cropped area, and start the appropriate set of <span> elements to reproduce that "context".

Ideally, there is existing software to do this that I have overlooked, and the answer to this question is simply a link to that software (e.g. in-browser JavaScript).

Otherwise, what's a good technique for performing a character-by-character rectangular selection of text in a <pre> element displayed in a web browser, that provides the start and end coordinates (column and row numbers) of the selection in the <pre>?

I've seen browser extensions that highlight a rectangular selection in a web browser, but none that do what I've described here.

I'm comfortable writing JavaScript that explores the DOM. Given character-based coordinates of a rectangular selection (row and column numbers inside the original <pre>), I reckon I could write the code to create the cropped <pre>, starting and ending the necessary "active"/antecedent <span> elements on each row of the selection. I'm less sure how to perform the character-by-character marquee selection of the <pre> contents, though. I'd prefer to be told "It's been done, here". Advice welcome.

Answer 1

Workaround: embed the HTML <pre> in an SVG <foreignObject>

In case this is useful to anyone else: I've developed a workaround that achieves a cropped view without actually cropping the <pre> markup. No code libraries involved. Just markup.

I acknowledge that, strictly speaking, this is not a direct answer to my original question. But it achieves the effect I want.

The workaround: embed the HTML <pre> element in an SVG <foreignObject> element inside an <svg> element. Adjust the SVG viewBox to show only the area that you want.

I've elided a lot of detail (e.g. calculating the viewBox values based on details such as number of rows and columns, and the font aspect ratio), but that's the basic idea.