Tutorial :Is there a way to highlight specific words or numbers without inserting a span tag?



Question:

I've got blocks of text with various specs in them and want to have jquery highlight whatever matches a specific pattern without inserting any extra html.

The following is the kind of text that I've got to work with.

Intel® Core™ i7 Processor 920 (2.66GHz, 8MB cache, 4.8GT/sec)/ Genuine Windows® 7 Home Premium 64bit- English/ 640 GB Serial ATA non Raid (7200 Rpm)/ 6GB 1333MHz (3x2GB) Tri Channel Memory/ Display Not Included/ 16X DVD+/- RW Optical Drive (DVD & CD read and write)/ 1.8GB NVIDIA® GeForce™ GTX260 graphics card/ Integrated HDA 7.1 Dolby Digital Audio

What I'm hoping jquery can do is highlight some of the basic specs without inserting any extra html. Maybe working off a list of values matching the spec format using some wildcards where neededed?

The css to select the correct

tag is #list div div div+p or I could just give the p class but would rather not.

Is this kind of thing possible?


Solution:1

If you mean "without inserting any extra html" in your server side HTML, then no.

But, you can achieve this by wrapping the keyword with jQuery.

Take a look to the jQuery Highligth plugin which will look for and wrap into a span your keywords, you'll just need a bunch of CSS.


Solution:2

You will need to insert some markup into the DOM at some stage, but if you dont want to place it inline with the text, you could absolutely position div or img tags just below the text. Im not sure how you would find the position of the text though (outside of IE which has some non standard methods with TextRanges - see the spellayt plugin for details).

You may be interested in this Highlighting plugin for jQuery though, it pretty much does this.


Solution:3

You can change the class of the container of the text to add highlighting. That container could be the <P> tag that surrounds the text. This will be the entire paragraph, not just the text within the paragraph where the text is found.


Solution:4

Here you go ..., check the fiddle works on your text

http://jsfiddle.net/rachit_doshi/hx37w/1/

Highlights all the characters sepcified including spaces Intel® Core™ i7 Processor 920 (2.66GHz, 8MB cache, 4.8GT/sec)/ Genuine Windows® 7 Home Premium 64bit- English/ 640 GB Serial ATA non Raid (7200 Rpm)/ 6GB 1333MHz (3x2GB) Tri Channel Memory/ Display Not Included/ 16X DVD+/- RW Optical Drive (DVD & CD read and write)/ 1.8GB NVIDIA® GeForce™ GTX260 graphics card/ Integrated HDA 7.1 Dolby Digital Audio

Let me know incase you need something extra :)


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »