0

The string returned by .toString() on a range created by document.createRange(...) will contain things like the inner part of script and style tags. (At least using current version of Chrome.)

Is there a way to get just the visible text?

Leo
  • 4,136
  • 6
  • 48
  • 72

1 Answers1

1

I found a solution that seems reasonable and at least tentative standard compliant. (My guess, without checking, is that the standards perhaps does not handle all details in a case like this yet, but that the current implementation in Chrome seems useful and might become standard.)

The solution is simply to first create a document fragment from the range:

    var fragment = r.cloneContents();

Then just walk the fragment the way you would walk a sub tree in the DOM. Do not enter nodes like "SCRIPT" and "STYLE". Collect the "#text" nodes.

Leo
  • 4,136
  • 6
  • 48
  • 72
  • Yes, this will work and I'd say is the easiest way. You can also walk the nodes in the range without the cost of creating a clone of its contents. For example: http://stackoverflow.com/a/7784176/96100 – Tim Down Jan 24 '14 at 00:35
  • Thanks Tim, I will keep it in mind. (Don't you have to do the adjustment for partial selected nodes at the end too?) – Leo Jan 24 '14 at 01:00
  • Yes, but that's not too hard. If `startContainer` is a text node, for example, you just need `range.startContainer.data.slice(range.startOffset)` for the contribution from the partially selected node at the start. Unless the range `endContainer` is the same node, of course. `cloneContents()` is definitely easier. – Tim Down Jan 24 '14 at 09:37