When I runder a pdf with pdf.js I would like to be able to restyle some words (e.g. highlight) is this possible?
问题:
回答1:
Yes, it is possible to highlight words while working with PDF.js
As a page contains
- a canvas (for the rendered content)
- an HTMLDivElement (for the non-rendered text content)
you can use the latter one to select text elements.
Having access to the Selection API on your browser, you can get the selection via document.getSelection()
.
The following code demonstrates how to do that if the selected text does not (internally) span across multiple HTMLElements:
var s = document.getSelection();
var oldstr = s.anchorNode.textContent;
var textBeforeSelection = oldstr.substr(0, s.anchorOffset);
var textInsideSelection = oldstr.substr(s.anchorOffset, s.focusOffset - s.anchorOffset);
var textAfterSelection = oldstr.substr(s.focusOffset, oldstr.length - s.focusOffset);
foo.anchorNode.parentElement.innerHTML
= textBeforeSelection
+ "<span class='highlight'>"
+ textInsideSelection
+ "</span>"
+ textAfterSelection;
For a selection that spans multiple (internal) HTMLElements you might be able to traverse the DOM starting at s.anchorNode
by successively calling nextSibling
until you reach at s.focusNode
.
I say might, because elements can be positioned in the document in a different order than the one they have on the view.
Assuming s.anchorNode
is not s.focusNode
,
s.anchorNode
would be highlighted from 0 tos.anchorOffset
s.focusNode
froms.focusOffset
until the end of the node and- all nodes between them could be highlighted entirely
This works (or at least might work) for text nodes - the idea could be extended to non-text nodes by surrounding each non-text node with the highlighting span.