tags:

views:

211

answers:

7
Beer
<br>
Vodka
<br>
rum
<br>
whiskey

how can you select beer ? or rum ? in jquery ? they are not surrounded by any html tags....

A: 

Try this

$("div:contains('Beer')").css("text-decoration", "underline");
Ben Shelock
He doesn't have it contained in a `div` and besides, if it was that would underline all the contents of that div, not just Beer
fudgey
A: 

Use the .contains method. See http://stackoverflow.com/questions/926580/find-text-string-using-jquery

Robert Harvey
A: 

Well it has to be surrounded by something, even if it's just the <body> tag. If you had a HTML document with just that written in it, I would think the browser would implicitly put a <body> in the DOM for you.

That being said, take a look at this:

http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery

Tinister
+4  A: 

If you mean that you want to select the text node directly, this is advised against using jQuery. To clarify, getting a wrapped set of text nodes is not a problem, but chaining commands onto a wrapped set of text nodes has unpredictable results or does not work with many of the commands since they expect the wrapped set to contain element nodes.

You can do it by filtering the children of a parent to return only text nodes, i.e. nodeType === 3 but if your question is about performing some manipulation on the text, then get the parent element and manipulate the text contents. For example,

$('#parentElement').html(); // html of parent element

$('#parentElement').text(); // text content of parent element and any descendents

$('#parentElement').contents(); // get all child nodes of parent element

If you wanted to get the text nodes, the following is one way

$('#parentElement').contents().filter(function() { return this.nodeType === 3 });

Or you may want to look at Karl Swedberg's Text Children plugin, which provides various different options too.

EDIT:

In response to your comment, one way to work with the text nodes in a wrapped set is to convert the jQuery object to an array, then work with the array. For example,

// get an array of the immediate childe text nodes
var textArray = $('#parentElement')
                    .contents()
                    .filter(function() { return this.nodeType === 3 })
                    .get();

// alerts the text content of each text node
$.each(textArray, function() {
    alert(this.textContent);
});

// returns an array of the text content of the text nodes
// N.B. Remember the differences in how  different 
// browsers treat whitespace in the DOM
textArray = $.map(textArray, function(e) {
    var text = $.trim(e.textContent.replace(/\n/g, ""));
    return (text)? text : null;
});
Russ Cam
i agree this is the best solution, by selecting text nodes.the problem is....how can you iterate through all the text nodes ?var texts = $('#parentElement').contents().filter(function() { return this.nodeType === 3 });texts.each ??
g2g23g
I'll update my answer to include an example of how to do this
Russ Cam
also, is it possible to select a text node using XPath ? it could be easier using xpath.
g2g23g
A: 

Personally, I'd wrap them in a <span> then you can refer to them more easily. I'm using Russ Cam's filter, so props (and +1) to him

$(document).ready(function(){
 $('body').contents().filter(function(){ return this.nodeType === 3 }).each(function(){
  $(this).wrap('<span class="text"></span>');
 })
})

Then you can just use $('.text') and selectors to access them more easily.

fudgey
A: 

What about a little DOM altering? First select nodes, which contain desired string, than run a function, which replaces every occurence of "string" with "string"

We need no external plugins for this

<div>
 Vodka <br />
 Rum <br />
 Whiskey<br />
</div>

<script type="text/javascript">
$(function(){
    $.fn.replaceText = function(txt){
     var reg = new RegExp(txt, 'g');
     var strWith = '<span class="selected">' + txt + '</span>';
     var rep = this.html().replace(reg, strWith);
     this.html(rep);
     return $("span", this);
    };
    $("div:contains('Vodka')").replaceText('Vodka').css('textDecoration', 'underline');
});
</script>

I've created this script really fast, so don't judge harshly :) (and it's 2:28AM :-D)

Juraj Blahunka
A: 

It looks to me that your text should actually be a list (ol/ul). This would then give you some semantic hooks for jQuery and make things a whole lot easier.

Toby Hede