Highlight text with Javascript

[Merx]

Hi!

Is it possible, using Javascript, to highlight (in yellow..) all the
occurrences of "number: [0-9]+" (regex) of the document?

Merx

[Randy Webb]

Re: Highlight text with Javascript

Merx wrote:[color=blue]
> Hi!
>
> Is it possible, using Javascript, to highlight (in yellow..) all the
> occurrences of "number: [0-9]+" (regex) of the document?[/color]

Yes.

[Merx]

Re: Highlight text with Javascript

> Merx wrote:[color=blue][color=green]
> > Hi!
> >
> > Is it possible, using Javascript, to highlight (in yellow..) all the
> > occurrences of "number: [0-9]+" (regex) of the document?[/color]
>
> Yes.[/color]

Good.

In a search on the web I found this page
http://www.nsftools.com/misc/SearchAndHighlight.htm that describe how to do
it using normal (not regex) search terms.

They wrote:

// we're not using a
// regular expression search, because we want to filter out
// matches that occur within HTML tags and script blocks, so
// we have to do a little extra validation

What does this mean? that is not directly possible to make a regex search on
rendered text ignoring HTML tags and script blocks?

Merx

[Ivo]

Re: Highlight text with Javascript

"Merx" wrote[color=blue]
> Is it possible, using Javascript, to highlight (in yellow..) all the
> occurrences of "number: [0-9]+" (regex) of the document?[/color]

Sure, enter "number\s\d " (without the quotes) in the input field, check the
"regex" checkbox, and look at the last line of the example text at
<URL: http://4umi.com/web/javascript/hilite.htm >

Below is the function that is called by the form:

function highlight(t, el) {
if (!t) return;
if(!document.ge tElementById('r egex').checked)
t = t.replace(/([\\|^$()[\]{}.*+?])/g, '\\$1');
if (/^\s*$/.test(t)) return;
var r, p = document.getEle mentById('case' ).checked? 'g':'gi';
if (document.getEl ementById('lite ral').checked) {
r = new RegExp(t, p);
} else {
r = new RegExp(t.split(/\s+/).join('|'), p);
}
var s = [el||document.do cumentElement|| document.body];
var h = document.create Element('span') , i = 0, e, j, l, o, k;
h.style.backgro undColor = '#ff0';
do {
e = s[i];
if (e.nodeType == 3) {
r.lastIndex = 0;
l = r.exec(e.nodeVa lue);
if (l != null) {
k = l[0].length;
if (r.lastIndex > k) {
e.splitText(r.l astIndex-k);
e = e.nextSibling;
}
if (e.nodeValue.le ngth > k) {
e.splitText(k);
s[i++] = e.nextSibling;
}
o = h.cloneNode(tru e);
o.appendChild(d ocument.createT extNode(l[0]));
e.parentNode.re placeChild(o, e);
}
} else {
j = e.childNodes.le ngth;
while (j) s[i++] = e.childNodes.it em(--j);
}
} while(i--);
}

HTH
Ivo

[Merx]

Re: Highlight text with Javascript

"Ivo" <no@thank.you > wrote in message
news:410fca62$0 $151$18b6e80@ne ws.wanadoo.nl.. .[color=blue]
> "Merx" wrote[color=green]
> > Is it possible, using Javascript, to highlight (in yellow..) all the
> > occurrences of "number: [0-9]+" (regex) of the document?[/color]
>
> Sure, enter "number\s\d " (without the quotes) in the input field, check[/color]
the[color=blue]
> "regex" checkbox, and look at the last line of the example text at
> <URL: http://4umi.com/web/javascript/hilite.htm >
>
> Below is the function that is called by the form:
>
> function highlight(t, el) {
> [...][/color]

Thanks. It works. But it stop to work well when there are html tags between
the words.
How to ignorate html tags and operate on the rendered text only?

Merx

[Mick White]

Re: Highlight text with Javascript

Merx wrote:
[color=blue]
>
> In a search on the web I found this page
> http://www.nsftools.com/misc/SearchAndHighlight.htm that describe how to do
> it using normal (not regex) search terms.
>
> They wrote:
>
> // we're not using a
> // regular expression search, because we want to filter out
> // matches that occur within HTML tags and script blocks, so
> // we have to do a little extra validation
>
> What does this mean? that is not directly possible to make a regex search on
> rendered text ignoring HTML tags and script blocks?[/color]

You can isolate textNodes, see W3C dom particulars.
IE uses "element.innerT ext", but this won't work on many browsers.
Mick
[color=blue]
> Merx
>
>[/color]