5 ms·

Replacing text in the DOM… solved?

79 points by bpierre 14y ago

wslh 14y 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.
- padolsey 14y ago
  I haven't tested it on IE8 tbh, but this solution doesn't actually use native DOM ranges.
  - wslh 14y ago
    If I remember well the issue came when you want to replace text from a selection.
deleted 14y ago
[deleted]
mkmcdonald 14y 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 14y ago
I did something similar as a jQuery plugin here: https://github.com/garyharan/jquery-replace-utilities https://github.com/garyharan/jquery-replace-utilities
- padolsey 14y 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 14y 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!
albertoavila 14y ago
I actually did something like that a few months ago: https://gist.github.com/3050333 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/#highlight:9-1|110,158 http://gnozin.com/sobremesa/2012/07/02/buena_venta/#highligh...
- alttab 14y 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
 - albertoavila 14y 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.
 - alttab 14y ago
 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.
tantalor 14y ago
Why not make this a method of Element? myElement.findAndReplaceText(/foo/, 'em');
macowar 14y 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)

79 points by bpierre 14y ago

wslh 14y 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.

padolsey 14y ago
I haven't tested it on IE8 tbh, but this solution doesn't actually use native DOM ranges.
- wslh 14y ago
  If I remember well the issue came when you want to replace text from a selection.

deleted 14y ago

[deleted]

mkmcdonald 14y 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 14y ago

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

padolsey 14y 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 14y 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!

albertoavila 14y ago

I actually did something like that a few months ago: https://gist.github.com/3050333 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/#highlight:9-1|110,158 http://gnozin.com/sobremesa/2012/07/02/buena_venta/#highligh...

alttab 14y 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
- albertoavila 14y 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.
 - alttab 14y ago
 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.

tantalor 14y ago

Why not make this a method of Element? myElement.findAndReplaceText(/foo/, 'em');

macowar 14y 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)