Comments on: Replacing text in the DOM… solved?

By: Gyorgy

Gyorgy — Fri, 12 Oct 2012 12:56:23 +0000

Appreciated James, yes replacing & nbsp ; with s works great! Much appreciated.

By: James

James — Fri, 12 Oct 2012 12:53:57 +0000

@Gyorgy, You'll need to modify the regular expression that you search with to include  . E.g. If I was searching for the text 'foo bar', and the space in between were potentially a non-breaking space, then I'd have to search instead for /foo(?:s| )+bar/.

By: Gyorgy

Gyorgy — Fri, 12 Oct 2012 12:00:41 +0000

Sorry it is me again, the white space was a non breaking space, and I did not place it in a markup, so here we go again:

"In this condition,<span style="mso-spacerun: yes;">&nbsp;</span> I will succeed."

By: Gyorgy

Gyorgy — Fri, 12 Oct 2012 11:37:48 +0000

Just tested your fantastic script via the demo with this sample text:

“In this condition, I will succeed.”

This was a straight paste from word, but it is not finding the text due to the ” ” html special character when trying to match “condition, I”

By: Jean-Michel GARCIA

Jean-Michel GARCIA — Thu, 09 Aug 2012 12:12:54 +0000

James,

Thanks for this article. It has helped me a lot, including the “traversing nodes to search for a text” thing.

I’m writing a GWT library that uses the same principles you’ve described here.

Thanks for sharing this.

Best regards!

By: Remy Sharp

Remy Sharp — Fri, 06 Jul 2012 14:36:14 +0000

So this isn’t quite the same, we had a project that you could include a script tag and it would find all occurrences of the word “red” stand alone or inside other words (like ordeRED) and create a link out of it, style it leave the word looking like orde(red) (where “(red)” is styled and the link).

Thought I’d share it with you – basically what it does is look for specific tags, and drives down to the #text node, and once it has that, mash away at the content to create the modified DOM: http://remysharp.com/downloads/red.js (authored back in 19 Oct 2008!).

By: Asen Bozhilov

Asen Bozhilov — Thu, 05 Jul 2012 13:59:43 +0000

Thanks for your solution.

The event handlers are not problems. Usually you have a function which initialize your handlers. After replacing, I am able to reattach the handlers. If you use delegation pattern you could avoid reinitialization.

This is a te<em>st</em>

This is nasty, isn’t it? HTML formatting only of couple of symbols in the word. Anyway, you could strip formatting tags such: em, b, strong, i
I haven’t seen someone to attach handlers of formatting tags and I don’t want to see.

After that the solution is really simple and I guess faster than DOM manipulations.

If someone is interested in my solution I will post the code.

By: James Treworgy

James Treworgy — Thu, 05 Jul 2012 13:22:06 +0000

@Mark, re: server versus client concerns. There are good reasons to do things on the server even though the client *can* do them, or the server doesn’t *need* to do them.

Maybe it’s just easier. Writing and debugging is almost always easier on the server, because it’s completely under your control, and chances are you’re using a framework with a lot more built in than client-side javascript. If server load is not a concern, and for most people it isn’t, then there’s a very real value to coding something in a way that takes less time and is easier to maintain. Let’s face it- Javascript is an interesting language, but it sure doesn’t come with a lot out of the box compared to your typical server framework.

And, it’s less code you need to send over the wire to the client.

By: Mac

Mac — Thu, 05 Jul 2012 13:01:32 +0000

xpath is helpful. The Javascript will replace all occurances of ‘the’ with ‘ye’.

javascript:d=document;x=d.evaluate(‘.//text()[normalize-space(.)!=”]’,d.body,null,7,null);for(i=0,l=x.snapshotLength;i

By: Tim Down

Tim Down — Thu, 05 Jul 2012 08:30:09 +0000

I’ve done a fair amount of work in a very similar area recently for my Rangy library. It goes further by working on “the text the user sees”, i.e. not considering text that is hidden by CSS or is within a script or style element, collapsing consecutive spaces, includes line breaks generated by br elements and block elements. Here’s a demo:

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

The relevant part is the custom search feature.