I liked the hack that I used in the bililiteRange utilities demo to highlight the ranges in a textarea: creating a "shadow" preelement and using that to set the background of the desired text. It's based on this trick (explained in a ddforum post) by someone with a screen name of Trinithis.
I put it into a jQuery plugin, $.fn.texthighlight(bounds, id, color) that lets you quickly highlight a section of text in a textarea that will scroll with the text (having the highlighting stay with the text as it's edited is a different story; see the source for the bililiteRange utilities demo for that). It is a hack, and remains flaky (especially for Internet Explorer, for which I cannot get white-space: pre-wrap to work consistently).
Parameters
bounds{Array [start, end]} | "remove" | "delete". Required. The starting and ending character positions to highlight."remove"removes the given highlighter, and"delete"removes all of them and cleans up the wrapping element and data.id{String}. Optional; if falsy, uses"default". An arbitrary string to identify the highighter for future changing or removing.color{String}. Optional; if falsy, uses"#f0f"(a nice, bright magenta: ). The CSS color to use for the highighting (at 0.25 opacity).
Events
After highlighting, triggers a "texthighlight" event, with parameters [span, bounds] where span is a jQuery collection with one item, the highlighter elemeent, and bounds is the array originally passed into the plugin. So $('textarea').on('texthighlight', function (event, span, bounds) {span[0].scrollIntoView()}) will scroll the highlighted area to the top of the window whenever the highlighter is set.
Leave a Reply