Search jQuery

jQuery Forum

Select only text visible on webpage, from DOM parent element

in Using jQuery • 8 years ago

Inside a content script of my work-in-progress Firefox add-on, I have a variable named `element ` containing the reference toward a generic DOM element. This element may contain children or grandchildren, which in turn may contain text nodes visible on the rendered webpage.

My goal is to extract all the visible text contained in this DOM `element `. Internet Explorer has the innerText method, which does exactly what I need but, unfortunately, that is not a standard method and does not work/exist outside of IE.

Firefox comes with a similar textContent property which closely imitates `innerText `, but fails to filter off invisible text contained within tags such as `<script> ` and `<style> `.

Looking for a jQuery solution, I believe I'm close to find one; I've come to:

text = $(element).filter(":visible").text();

This statement correctly extracts the text contained in all the children of `element `, but invisible text from `<script> ` tags is not filtered off. Googling around, I couldn't find any reference solution to the problem.

Replies(11)

jakecigar

Re: Select only text visible on webpage, from DOM parent element

8 years ago

I would test element.nodeName to avoid script and style, and noscript and a whole bunch more.

JΛ̊KE

davidebal..

Re: Select only text visible on webpage, from DOM parent element

8 years ago

Thanks for the hint Jake. I'm completely new to jQuery so I evaluate every suggestion.
Anyway, recursively processing nodeName and tagName feels a bit like reinventing the wheel; doesn't jQuery support such filtering out of the box?
In my code snippet above I show some playing with the method filter(":visible") . May it have a role in filtering out content (text, in this case) which is not visible on the rendered webpage?

Perhaps my snippet above is ill-formed and the filter doesn't get applied?

jakecigar

Re: Select only text visible on webpage, from DOM parent element

8 years ago

text = $(element).filter(":visible").text();

is strange that there is one element and you get it’s text value if IT is visible. There is no searching down the DOM tree.

I do something similar to get the speakable text of a node. given speakable…

var speakableText=$("<div>",{html:speakable}).find("script,style").remove().end()
.find("*").contents().map(function(){if( this.nodeType===3) return $(this).text()})
.get().join(" ")

JΛ̊KE

davidebal..

Re: Select only text visible on webpage, from DOM parent element

8 years ago

Actually, text() does search down the DOM tree (according to http://api.jquery.com/text/ ). That is why my snippet above takes to light not only the visible text on the webpage, but also all the invisible code contained inside <script> tags.

I'm not high enough to understand your example on post #3 . find("script,style").remove() sounds like a solution. Now I need to figure out how to put all the pieces together :P

jakecigar

Re: Select only text visible on webpage, from DOM parent element

8 years ago

If you make a demo in http://jsfiddle.net , you can try something, pass it back to us, and we can pass it back to you with improvements.

JΛ̊KE

jakecigar

Re: Select only text visible on webpage, from DOM parent element

8 years ago

If you wind up using find("script,style").remove().end(), you need to make sure you are not operating on the real DOM, You can start with a .clone() or create a fresh element like I did with $("<div>",{html:speakable}).

JΛ̊KE

jakecigar