jquery: how can you select texts not surrounded by html tags?

Question

Beer


Vodka


rum


whiskey

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

Answer 1

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;
});

Answer 2

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)

Answer 3

Use the .contains method. See Find text string using jQuery?

Answer 4

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.

Answer 5

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.

Answer 6

Try this

$("div:contains('Beer')").css("text-decoration", "underline");