Show HN: A DOM text-selection highlight renderer

This is really great. I think we&#x27;re going to use this for helping us highlight parts of the YC application that sticks out to the partners. Very interesting to see that what you actually store in local storage.<p>[{&quot;startOffset&quot;:35,&quot;endOffset&quot;:42,&quot;startContainerPath&quot;:&quot;html&gt;body&gt;div:nth-of-type(1)&gt;div&gt;p:nth-of-type(1);0&quot;,&quot;endContainerPath&quot;:&quot;html&gt;body&gt;div:nth-of-type(1)&gt;div&gt;p:nth-of-type(1);0&quot;},{&quot;startOffset&quot;:32,&quot;endOffset&quot;:7,&quot;startContainerPath&quot;:&quot;html&gt;body&gt;div:nth-of-type(1)&gt;div&gt;p:nth-of-type(1);10&quot;,&quot;endContainerPath&quot;:&quot;html&gt;body&gt;div:nth-of-type(1)&gt;div&gt;p:nth-of-type(1)&gt;code:nth-of-type(3);0&quot;}]<p>One thing I think we might tweak for ourselves is to also store a copy of the string in there.<p>Thank you so much for sharing! I bet people would love an example showing how to use this to sync highlighted examples across user accounts. Hopefully, someone will do a Show HN of that!

I build a fast small text-selection renderer that creates serializable text-renderings. Feedback appreciated. Right now it lacks some documentation how to use it, but I hope the sample makes clear what the library does.

I noticed that you can mark an already marked section, which adds the marked color on top again, and again and again until you can&#x27;t tell anymore because alpha = 100.

Did you take inspiration from Rangy (<a href="https:&#x2F;&#x2F;github.com&#x2F;timdown&#x2F;rangy" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;timdown&#x2F;rangy</a>) and if yes, what makes Marklib better? Would like to know if there are obvious benefits to using Marklib over Rangy.

Seems like a good candidate for a bookmarklet that injects it into any page.

I get inconsistent results when I triple-click to create the selection. For example, triple-clicking the word &quot;Start&quot; in the first paragraph highlights the entire first line, extending to the right margin; hitting enter to &quot;mark&quot; it results in the entire paragraph being marked. Triple-clicking the first word &quot;Marklib&quot; in the next sentence highlights the remaining three sentences, but only &quot;Marklib&quot; is marked.<p>Also, any marking in the &quot;code block&quot; or the page title omits the spaces, which looks a little awkward.<p>Running Chrome 43.0.2357.124 on OS X

Well done! I know it is not an easy task to do. I built something fairly similar (and way less quick) <a href="http:&#x2F;&#x2F;jsfiddle.net&#x2F;2XLBr&#x2F;" rel="nofollow">http:&#x2F;&#x2F;jsfiddle.net&#x2F;2XLBr&#x2F;</a> and the git repo: <a href="https:&#x2F;&#x2F;github.com&#x2F;skimhub&#x2F;phone-highlight" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;skimhub&#x2F;phone-highlight</a>

There is a weird behavior when you highlight something that has partially already been highlighted. I think you should take a look at how `preview` on osx does it. It cancels the already highlighted parts only if they are included in the new highlighted area. If an already highlighted part cross with the new highlighted area, then it will behave like it is behaving in your script.

This is really nice work! I think I&#x27;ve found a bug where the highlight doesn&#x27;t fully mark the part I&#x27;ve selected, though. To reproduce scroll down to the section &quot;A second paragraph with some latin like text&quot; and select that header, the entire paragraph, and up to the button below it. Then press enter. Only the header is highlighted.

This is a case of Something.js if I&#x27;ve ever seen one:<p><a href="http:&#x2F;&#x2F;www.developingandstuff.com&#x2F;2015&#x2F;03&#x2F;somethingjs.html" rel="nofollow">http:&#x2F;&#x2F;www.developingandstuff.com&#x2F;2015&#x2F;03&#x2F;somethingjs.html</a>

There is also <a href="https:&#x2F;&#x2F;github.com&#x2F;SmartTeleMax&#x2F;MaSha" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;SmartTeleMax&#x2F;MaSha</a> MaSha has ajax support. But no library supports multiple colors :(

Well done - works surprisingly well on my iPhone. Working with text selection in the browser is notoriously difficult so I&#x27;m glad this works.

Thanks a thousand for posting about marklib (and rangy, and phone-highlight).

Is there a good library that does the same inside a textarea?

At the risk of sounding a bit grumpy but I&#x27;m genuine here, I seriously don&#x27;t get this tool. Is not the same thing as getSelection() with a CSS background-color cherry on the top or I&#x27;m missing something here?