我有 HTML
我想要原始 160x62
我不想将矩形选择捕获为位图屏幕截图。我想将内容保留为 HTML。
在网络浏览器中，我想在原始 160x62
裁剪后的
。
对于所选矩形区域的每一行，创建裁剪的
。 元素在裁剪区域左边缘的原始
理想情况下，有一个我忽略的现有软件可以做到这一点，并且这个问题的答案只是该软件的链接（例如浏览器内的 JavaScript）。
否则，在 Web 浏览器中显示的
我见过一些浏览器扩展可以突出显示网络浏览器中的矩形选区，但没有一个能够实现我在此描述的功能。
我很乐意编写探索 DOM 的 JavaScript。给定矩形选择的基于字符的坐标（原始
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.
发布评论
评论（1）
解决方法：将 HTML
如果这对其他人有用：我开发了一种实现裁剪视图的解决方法而不实际裁剪
我承认，严格来说，这并不是对我原来问题的直接回答。但达到了我想要的效果。
解决方法：将 HTML
我省略了很多细节（例如，根据行数和列数以及字体长宽比等详细信息计算
viewBox值），但这就是基本思想。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 SVGviewBoxto show only the area that you want.I've elided a lot of detail (e.g. calculating the
viewBoxvalues based on details such as number of rows and columns, and the font aspect ratio), but that's the basic idea.