Javascript/jQuery substring highlighting problem

Question

I am using Javascript to calculate the offset and length of a substring selected on my page. This gets stored somewhere and later, when I hover over the text I want to highlight certain words in it using that offset and length in jQuery. Here is the basic code used for the highlight:

content = $("#reader").html();
newContent = content.substring(0,offset)+'<font style="color: red;">'+content.substring(offset,offset+length)+'</font>'+content.substring(offset+length,content.length);
content = $("#reader").html(newContent);

Now my problem is this: the offset and length are calculated over what is displayed on the screen. The actual HTML code, however, may also contain <p> or other tags. As a result, the text that I highlight gets "shifted", depending on the amount of HTML code present.

What is the easiest way to solve this?

Adrian Heine · Accepted Answer · 2011-08-23 10:57:46Z

1

This is not easily solvable. You shouldn’t calculate offset and length over the text, but over the HTML, if you want to work on the HTML afterwards. However, inserting HTML tags somewhere into an existing HTML string may lead to invalid nesting. And finally, you lose state like attached event handlers if you re-insert nodes as HTML code.

answered Aug 23, 2011 at 10:57

Adrian Heine

4,1513 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arvind.mohan · Accepted Answer · 2013-10-01 20:58:11Z

1

use

$("#reader").text()

instead of $("#reader").html() to get the text out of your content

answered Oct 1, 2013 at 20:58

arvind.mohan

9142 gold badges11 silver badges24 bronze badges

Comments

RobertO · Accepted Answer · 2011-08-23 11:00:59Z

0

I'd strip tags or use DOM methods - like. .nodeType, .nodeValue.

answered Aug 23, 2011 at 11:00

RobertO

2,6731 gold badge21 silver badges18 bronze badges

Collectives™ on Stack Overflow

Javascript/jQuery substring highlighting problem

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related