AUTHOR: Peter Milchev
DATE POSTED: June 18, 2018
Highlight text in HTML elements with regular expressions.
We can use RegEx to wrap the text with a <span> element that has the CSS class "highlight" for example. Then, we can style all elements with this class.
To make the highlighting easier, a custom CSS class can be added to the elements that contain the text that should be highlighted, for example "searchable". The following example expects the "searchable" elements to contain only text.
For this example, we will use the TreeView and we will highlight the matching text in the nodes.
<style>
.highlight {
background
: yellow;
}
.rtLI {
white-space
:
normal
;
</style>
<script type=
"text/javascript"
>
function
highlight(ev, inp) {
var
$ = $ || $telerik.$;
treeview = $find(
"<%= RadTreeView1.ClientID%>"
);
allnodes = treeview.get_allNodes()
searchText = inp.value;
$(treeview.get_element()).find(
".rtText, .searchable"
).each(
(ind, it) {
it.innerHTML = stripHighlight(it.innerHTML)
it.innerHTML = highlightText(searchText, it.innerHTML)
})
stripHighlight(originalHtml) {
strippedHtml;
strippedHtml = originalHtml.replace(/(<span class=
"highlight"
>)/gi,
""
)
strippedHtml = strippedHtml.replace(/(<\/span>)/gi,
return
//https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
escapeRegExp(str) {
str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
"\\$&"
highlightText(text, originalHtml) {
newHtml;
newHtml = originalHtml.replace(
new
RegExp(escapeRegExp(text),
"gi"
),
replace(match) {
'<span class="highlight">'
+ match +
'</span>'
</script>
<
input
type
=
"text"
id
"search"
placeholder
"Enter search string here..."
value
onkeyup
"highlight(event,this)"
/>
telerik:RadTreeView
runat
"server"
ID
"RadTreeView1"
Nodes
telerik:RadTreeNode
Text
"The Greatest Rock Albums"
Expanded
"true"
CssClass
"root-node"
"Rolling Stones"
NodeTemplate
div
class
"node-album"
span
"band searchable"
<%# DataBinder.Eval(Container, "Text") %>
</
><
"album searchable"
>Sticky Fingers</
"Sticky Fingers"
"node-album-data"
img
src
"images/sticky.png"
alt
width
"73"
height
"74"
"details searchable"
>This was the first album recorded on the Rolling Stones'
own label, the first in which Mick Taylor played guitar on all the tracks, and only
the fourth to be released worldwide.</
"Led Zeppelin"
>Led Zeppelin IV</
"Led Zeppelin IV"
"images/led.png"
>Led Zeppelin's fourth album actually has no title that
can be pronounced or reproduced with alphanumeric characters, consisting instead
of a series of hand drawn symbols.</
"Jimi Hendrix"
>Electric Ladyland</
"Electric Ladyland"
"images/hendrix.png"
>This was the legendary rock guitarist's only #1 album,
and contains samples of his stylistic range, from blues to '50s rock to psychedelia.
"The Beatles"
>Revolver</
"Revolver"
"images/beatles.png"
>This was the 13th of the 20 albums released in the United
States by The Beatles. It was released in August 1966, roughly in the middle of
the band's ten-year life. </
Resources Buy Try