JS DOM: Get elements by text content

问题:

I am looking for a way to perform fulltext search on the DOM tree with JS. In two words, I would like to retrieve the list of text nodes which contain a given string.

I've tried mootools' Element.getElements ( ':contains[string]' ) but I can't get it to work with strings containing whitespace.

EDIT: jQuery and mootools seem to have their :contains operators work through tree traversal. This would mean that there is no native way for searching the page, is this correct? Seems very inefficient if the page is huge and the only info you have about your element is the string being searched for. Am I wrong?

I'm thinking about indexing all text nodes and checking against the index for each string being searched for, but, in my project, there's no way of telling when the DOM updates in order to maintain such an index up-to-date.

Any better ideas?

Thanks

回答1:

If you have a modern browser, you can always use XPATH, since it has content-based search.

This is an example:

document.evaluate('//*[text()="' + string + '"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE).snapshotItem(0);

And with older browsers, you can shim XPATH in with something like http://llamalab.com/js/xpath/

回答2:

Will 'contains' selector from jquery solve the problem?

http://api.jquery.com/contains-selector/

回答3:

In general DOM: For getting element by text in DOM

//*[text()='anytext']

or

//*[.='anytext']