Replacing text in the DOM… solved? • Hacker News Board

Re: Replacing text in the DOM… solved?

#11

Post by albertoavila » Thu, Jul 05, 2012, 2:24 AM UTC

alttab wrote: post #10

albertoavila wrote: post #9

I actually did something like that a few months ago: https://gist.github.com/3050333 Only the problem was a bit different, I wanted to be able to select a section of a blog post to generate a url fragment representing that selection, so, if you shared it, that section would be highlighted when entering the page, but the underlying problem is the same, example: http://gnozin.com/sobremesa/2012/07/02/buena_venta/#highl…

That's actually Really cool. Looks like you hacked it to do it positionally. What is the 9-1? I'm assuming that last bit is the range in a Dom content substring

The 9-1 is the node hierarchy needed to find out where to start the highlighting, it's something like look for the 10nth child and then find the second child of that element (zero based index).

If you have a more complex markup it becomes apparent, for example, if you selected something inside

Text

it would look like 0-1-0-0

The last part is exactly what you suggested, it's just the dom content substring.

Another thing that it's not evident is that the selected text can transverse trough html elements, for example, start inside a span and end outside that span.

Sadly that blog is not under my control, maybe i should try to blow the dust off that code and make a sample page.

Re: Replacing text in the DOM… solved?

#12

Post by alttab » Thu, Jul 05, 2012, 2:46 AM UTC

albertoavila wrote: post #11

alttab wrote: post #10

Earlier quoted context omitted.

That's actually Really cool. Looks like you hacked it to do it positionally. What is the 9-1? I'm assuming that last bit is the range in a Dom content substring

The 9-1 is the node hierarchy needed to find out where to start the highlighting, it's something like look for the 10nth child and then find the second child of that element (zero based index). If you have a more complex markup it becomes apparent, for example, if you selected something inside Text it would look like 0-1-0-0 The last part is exactly what you suggested, it's just the dom content substring. Another thi…

I getcha.cthe code will work if the blog author changes the layout still? That is, the children aspect works and doesn't need to be tweaked for each layout and works for all correct HTML?

That said, if it's a Wordpress blog or something and the layout changes any existing links might not work.

Did you try encoding the text you want to highlight (and maybe the ordered instance) and then have the code search for it? I figure this might be less straight forward though as you'd need to strip HTML tags, find the text, and translate that back into modified Dom which could break many things.

Re: Replacing text in the DOM… solved?

#13

Post by albertoavila » Thu, Jul 05, 2012, 3:27 AM UTC

alttab wrote: post #12

albertoavila wrote: post #11

Earlier quoted context omitted.

The 9-1 is the node hierarchy needed to find out where to start the highlighting, it's something like look for the 10nth child and then find the second child of that element (zero based index). If you have a more complex markup it becomes apparent, for example, if you selected something inside Text it would look like 0-1-0-0 The last part is exactly what you suggested, it's just the dom content substring. Another thi…

I getcha.cthe code will work if the blog author changes the layout still? That is, the children aspect works and doesn't need to be tweaked for each layout and works for all correct HTML? That said, if it's a Wordpress blog or something and the layout changes any existing links might not work. Did you try encoding the text you want to highlight (and maybe the ordered instance) and then have the code search for it? I…

The code looks for the post container element, so, if the layout is changed you would need to change at most just the parent css selector, and old links would still be working, but would stop working if the post is edited, i.e. a new paragraph was added.

It wouldn't be a problem to encode the selected text and look for it, actually that's how the selecting works, i get the selected text and look for it on the document,striping html tags and finding all the elements which contains part of the selected string, only then i enconde the relative position on the dom tree of the node to be able to look for it later (The 9-1 stuff).

The problem with encoding the text is that the url could get pretty long pretty easily, but that could be solved if the server stored it and you got only a hash to look it up, that would have the benefit of the highligting links to keep working if the post is edited partially.

Re: Replacing text in the DOM… solved?

#14

Post by tantalor » Thu, Jul 05, 2012, 3:39 AM UTC

Why not make this a method of Element?

  myElement.findAndReplaceText(/foo/, 'em');

Re: Replacing text in the DOM… solved?

#15

Post by padolsey » Thu, Jul 05, 2012, 8:34 AM UTC

xutopia wrote: post #7

I did something similar as a jQuery plugin here: https://github.com/garyharan/jquery-replace-utilities

This doesn't solve the cross-element-boundary problem though. If a match starts in one element but ends in another this plugin doesn't seem to replace it at all.

Re: Replacing text in the DOM… solved?

#16

Post by timdown » Thu, Jul 05, 2012, 8:35 AM UTC

albertoavila wrote: post #9

I actually did something like that a few months ago: https://gist.github.com/3050333 Only the problem was a bit different, I wanted to be able to select a section of a blog post to generate a url fragment representing that selection, so, if you shared it, that section would be highlighted when entering the page, but the underlying problem is the same, example: http://gnozin.com/sobremesa/2012/07/02/buena_venta/#highl…

Looks similar to the serializer module of my rangy project:

http://rangy.googlecode.com/svn/trunk/demos/serializer.html

Re: Replacing text in the DOM… solved?

#17

Post by macowar » Thu, Jul 05, 2012, 1:04 PM UTC

This bookmarklet uses xpath to replace every plain text 'the' with 'ye'.

javascript:d=document;x=d.evaluate(‘.//text()[normalize-space(.)!=\'\']‘,d.body,null,7,null);for(i=0,l=x.snapshotLength;i<l;i++){t=x.snapshotItem(i); t.data=t.data.replace(/the/gi,'ye')} void(1)

Re: Replacing text in the DOM… solved?

#18

Post by albertoavila » Fri, Jul 06, 2012, 5:28 PM UTC

timdown wrote: post #16

albertoavila wrote: post #9

I actually did something like that a few months ago: https://gist.github.com/3050333 Only the problem was a bit different, I wanted to be able to select a section of a blog post to generate a url fragment representing that selection, so, if you shared it, that section would be highlighted when entering the page, but the underlying problem is the same, example: http://gnozin.com/sobremesa/2012/07/02/buena_venta/#highl…

Looks similar to the serializer module of my rangy project: http://rangy.googlecode.com/svn/trunk/demos/serializer.html

Hey!, it's seems pretty similar indeed, obviously your lib seems to have a lot more of work put into it than my quick hack, seems pretty cool.