Replacing text in the DOM… solved?

http://james.padolsey.com/javascript/replacing-text-in-the-dom-solved/

by bpierre • 14 years ago

79 16 14 years ago

james.padolsey.com

wslh2• 14 years ago

The thing is that also depends on the browser version. You couldn't do that for IE 8 and below because there is not real DOMRange support.

padolsey2• 14 years ago

I haven't tested it on IE8 tbh, but this solution doesn't actually use native DOM ranges.

wslh2• 14 years ago

If I remember well the issue came when you want to replace text from a selection.

mkmcdonald• 14 years ago

Oddly enough, I was working on a similar problem earlier today.

I've found that collecting the Text nodes and returning them in an Array is preferable. All it requires is some simple traversal. The developer (that should know what text goes where) can then map text to nodes.

xutopia• 14 years ago

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

padolsey2• 14 years ago

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.

jQueryIsAwesome• 14 years ago

One of the reasons not to use the innerHTML prop is because (almost) all interactivity gets broken; for example a CSS3 animation restarts if you set innerHTML of one of its parent elements.

Another reason is because IE (even the 9) likes to delete white-spaces when you set innerHTML; even in PRE tags!

albertoavila4• 14 years ago

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/#highligh...

alttab2• 14 years ago

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

albertoavila4• 14 years ago

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.

timdown• 14 years ago

Looks similar to the serializer module of my rangy project:

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

albertoavila4• 14 years ago

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.

tantalor• 14 years ago

Why not make this a method of Element?

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

macowar• 14 years ago

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)

Replacing text in the DOM… solved?

Related Stories