mir3z / texthighlighter Goto Github PK
View Code? Open in Web Editor NEW-- NO LONGER MAINTAINED -- TextHighlighter allows you to highlight text on web pages.
Home Page: http://mir3z.github.com/texthighlighter/
License: MIT License
-- NO LONGER MAINTAINED -- TextHighlighter allows you to highlight text on web pages.
Home Page: http://mir3z.github.com/texthighlighter/
License: MIT License
The tool doesn't seem to work anymore since I updated to Safari 7.0.1 (possibly 7.0 as well) on mac.
I am trying to use your library, so first of all thanks for the awesome resource.
Can you guide me how to create a another demo on which the highlights are created after a user clicks on a button.
A selection is not automatically converted into a highlight. And there is no sandbox on the page
Steps to reproduce:
The space is not highlighted and therefore the highlights are not merged. Removing the regex check seems to solve this: https://github.com/mir3z/jquery.texthighlighter/blob/master/src/jquery.textHighlighter.js#L193
Was there another reason for this test? Given the node type has already been verified as text, wouldn't node.nodeValue
always be a string?
I downloaded but its not highlighting in iframe , its showing well in server but not running in local
Steps to reproduce (with some pseudo-ML of current functionality):
Highlight a string with any color1. Result:
<color1>This is now highlighted<color1>
With a different color2, highlight a substring1 of string. Result:
<color1>This <color2>is now</color2> highlighted</color1>
With color1, highlight a different substring2; it may overlap with substring1 as long as one endpoint of substring2 is outside substring1. The entire string is returned to color 1. Result:
<color1>This is now highlighted</color1>
This doesn't seem like the intended functionality. Is it? If not, it could be fixed:
Case 1: If substring2 does not overlap with substring1, do nothing (since it's highlighting the whole string redundantly with color1.
Case 2: If substring2 completely contains substring1, replace the node substring1 with its innerHTML
(or text()
, if more appropriate), deleting it as a child node, and making its content directly part of string.
Case 3: If substring2 does overlap with substring1, "push" the beginning of substring1 to only include the portion that was not highlighted with color1. To visualize, here's some pseudo-ML of fixed functionality:
Highlight string with color1. Result:
<color1>This is now highlighted<color1>
Highlight substring1 ("is now") with color2. Result:
<color1>This <color2>is now</color2> highlighted</color1>
Highlight substring2 ("now highlighted") with color1. Result (either of these work, but it depends how much parent/child relationship you want to keep):
<color1>This <color2>is </color2>now highlighted</color1>, or
<color1>This </color1><color2>is </color2><color1>now highlighted</color1>
/**
* Highlights range.
* Wraps text of given range object in wrapper element.
* @param {Range} range
* @param {HTMLElement} wrapper
* @returns {Array} - array of created highlights.
* @memberof TextHighlighter
*/
TextHighlighter.prototype.highlightRangefunction(range, wrapper) {
....
Is it possible to prevent before merge two highlights?
I mean disable extending existing higlight when new higlight has common part with existing one.
Hi,
Is there a way to toggle hilighting events? to make a button On/Off (or select/deselect a color) the behavior.
Thanks
It would be awesome to disable overlapping selections ๐
(Rough) Steps to reproduce (variations on these will consistently reproduce the issue; reproduction may be possible other ways as well):
Highlight a string1 of text with any color1, but leave some unhighlighted on one side
\1/ (original endpoint of color1)
<color1>a b c d e f g h i j k l </color1>m n o p
With a different color2, highlight a string2 of text overlapping with string1 on one end (not inside string1)
\2/ (original start of color2) \1/
<color1>a b c d </color1><color2>e f g h i j k l m n o p</color2>
With a third color3, highlight a string3, which has one endpoint in each string1 and string2
\2/ (startpoint of color2) \1/
<color1>a b c d </color1><color3>e f g h i j k </color3><color2>l m n o p</color2>
(most consistent method I've found) With transparent color (eraser), click on the section that is still color2
\2/ (startpoint of color2) \1/ \/ click here
<color1>a b c d </color1><color3>e f g h i j k </color3><color2>l m n o p</color2>
A seemingly-random portion of text is deleted.
Here's a bug i noticed.
The letters in the header will be switched around, for example to "sumLorem ip"
Btw, texthighlighter is great, thanks for making it available!
I am changing the colorpicker.js array of three color , its got affected of three dots but color is not picking from here at all it already set somewhere i am nor getting from where it is coming . please do the reply for assistance where should i change to change the color of backgrond of highlighted text?
If I highlight first word in other highlighted text, then this word moved to the end of parent highlighting.
Like this:
allows you to highlight text on web pages*TextHighlighter*
. Just select it!
It's happened because .insertBefore(el, null)
behaves like .appendChild(el)
Hello,
is there any possibility to create demo with .destroy() method?
I tried to initialize the plug in on click and I would like to have off button to switch it off,
so I tried destroy() method, but it did not stop highlighting. Once I switch it on,
I cannot switch it off. I would like to have it like "higlight pen" button on my page and when you select
this tool you can highlight text. If you switch it of, it should not highlight anymore until you selet the tool again.
example:
jQuery('#textHighlightHandlerOn').click(function(e){
e.preventDefault();
hltr = new TextHighlighter(sandbox);
});
jQuery('#textHighlightHandlerOff').click(function(e){
e.preventDefault();
hltr.destroy();
});
Thanks for the details!
Is it possible to extend the API to support removing a single highlight? If I remove a highlight in an element with multiple highlights, it does not work properly because the paths are no longer correct.
We are getting many issues at this method.
JS console throwing - Cannot read property 'insertBefore' of null at this method.
can you please handle this error?
/**
* Inserts base element before refEl.
* @param {Node} refEl - node before which base element will be inserted
* @returns {Node} - inserted element
*/
insertBefore: function(refEl) {
return refEl.parentNode.insertBefore(el, refEl);
},
Regards,
Praveen Danagoudra
I'm trying to unmark a single selection but removeHighlights removes all the highlights.
Hi ,
i have a question:
i have a DB in server and in want to save selected text into Table.
how can i do that?
Tnx
Vahid
@mir3z Could you please explain why this repository isn't maintained anymore?
Is this project going to support restoring highlights after page reloaded?
I may have finished porting this to typescript. seems to be working for me. I'll see if I can make an npm model. I made them all static functions rather than full class. you pass in the body object to get it to work
In jquery.textHighlighter.js Line 415, the use of innerText returns null (tested on Firefox 21). It seems that $(hightlight).text() should be used.
The deserialization code fails to work in all cases. Here is an example taken from
http://mir3z.github.io/texthighlighter/demos/serialization.html
The following serialization string that the code puts into the console, when de-serialized, doesn't fully deserialize all the highlights and also throws some errors.
In the case below note that the third highlight (of the word "Donec") doesn't get highilghted on deserializing.
[["<span class=\"highlighted\" data-timestamp=\"1437222899270\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>"," ac ","7:3",0,4],["<span class=\"highlighted\" data-timestamp=\"1437222885083\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","ipsum","3:1",27,5],["<span class=\"highlighted\" data-timestamp=\"1437222886941\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","Donec","3:5",18,5],["<span class=\"highlighted\" data-timestamp=\"1437222897406\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","ellentesque leo nulla, porta non lectus eu, ullamcorper semper est. Nunc ","3:9",188,73],["<span class=\"highlighted\" data-timestamp=\"1437222903031\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","Sed ut pretium leo, quis vehicula diam. Proin nisi metus, elementum ut mi port","13:1",148,78],["<span class=\"highlighted\" data-timestamp=\"1437222897406\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","\n risus vel","3:11",0,30],["<span class=\"highlighted\" data-timestamp=\"1437222899270\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","suada auctor. Ut ","7:1",140,17],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>"," ante eu mollis. In nec\n dui vel mauris lacinia vulputate id nec turpis. Aliquam vestibulum, elit sit amet fringilla\n malesuada, quam nunc eleifend nunc, id iaculis est neque pretium libero.\n ","9:3",0,245],["<span class=\"highlighted\" data-timestamp=\"1437222886052\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","consectetur","3:3",17,11],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","attis tellus. Fusce orci nisi,\n ultricies vel hendrerit id, egestas id turpis. Proin cursus diam tortor, sed ullamcorper eros commodo\n vitae. Aenean et maximus sapien. Nam felis velit, ullamcorper eu turpis ut, hendrerit accumsan augue.\n Nulla et purus sem. Ut at hendrerit purus. ","9:1",213,338],["<span class=\"highlighted\" data-timestamp=\"1437222904383\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","ntum vitae\n lectus. Phasellus ut purus commodo ante iaculis molestie. Integer turpis felis, pellentesque eu\n dignissim vel, sodales vel metus. Aliquam tempus lorem odio. Sed purus arcu, auctor eget sodales\n ac, venenatis ac velit. Pra","17:1",222,291],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","Phasellus mollis commodo","9:2:0",0,24],["<span class=\"highlighted\" data-timestamp=\"1437222899270\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","egestas elit","7:2:0",0,12],["<span class=\"highlighted\" data-timestamp=\"1437222897406\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","convallis","3:10:0",0,9],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","First Name","11:1:1:1:0",0,10],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","Last Name","11:1:1:3:0",0,9]]
Here's one of the errors it adds into the console:
"Can't deserialize highlight descriptor. Cause: IndexSizeError: Failed to execute 'splitText' on 'Text': The offset 188 is larger than the Text node's length."
I use this library in a project, and like it very much, but this bug affects my project quite frequently. I've attempted to figure out why the deserialization code has this problem, but haven't been able to, any help you can offer would be greatly appreciated. If you need more sample cases, I'm happy to provide.
In Safari on iPad it only lets me select one word at a time.
I am trying to unhighlight the highlight by sending the rangy object but it gives error
Cannot read property 'nodeType' of undefined
i am calling unhighlight method by following syntax
hltr.removeHighlights('{"w":"<span class="highlighted" data-timestamp="1522665031488" style="background-color: rgb(255, 255, 123);" data-highlighted="true">","p":"ipsum","r":"3:1","s":27,"t":5}');
hey @mir3z ! This is a really great util! I have a question that (I hope) is pretty straight forward. I have an application where I am saving user highlights by serializing. When they come back to the page, I want the (old) highlights to load automatically. I also have a collaborative function that has users working together, and I am able to send the serialized highlights from one browser to the other in real time. What function do I hand (any highlight / range) to in order for the highlight to show up colored on the screen? Many thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.