Jquery $(element).contents().first().text("new text") doesn't work?

Question

I can't find anything about this on Google or here.

I have a div with in it, some text and some html as such:

<div id="test-div">
    http://<strong>somewebsite.com</strong>/big/long/unfriendly/path/
</div>

What I want to do, is add a <wbr> after every slash. (Because the value doesn't wrap otherwise and messes up my table). Doing a simple replace on the $('#test-div').html() will also mess with the strong tag, so that's not an option.

I figured using $('#test-div').contents() to filter out the text parts (recursively) would work. However I can't seem to edit the individual bits returned. I would expect this to change the http:// part:

$('#test-div').contents().first().text("something");

However it does nothing. I know I have my navigation right, because something like this:

$('#test-div').contents().first().wrap( "<b></b>" );

does work.

Why can't I change the text bit? (A more elegant solution to the initial problem would also be great)

`.text` probably only works on element nodes. This works fine: `$('#test-div').contents().first()[0].nodeValue = "something";` http://jsfiddle.net/2Gz8p/ — Felix Kling, Mar 07 '14 at 04:24

Bhojendra Rauniyar · Answer 1 · 2014-03-07T04:54:01.453

1

Use like this:

$('#test-div').contents().filter(function(){
    return $.trim($(this).text()) == 'http://';
}).remove().end().prepend('something');

demo

or,

$('#test-div').contents().first().remove().end().prepend("something");

demo

edited Mar 07 '14 at 04:54

answered Mar 07 '14 at 04:38

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 2 · answered Mar 07 '14 at 04:30

0

have you tried

$(element).html('your content here');

answered Mar 07 '14 at 04:30

user3391056

61
2
7

I have, however my initial problem is that I need to replace slashes in the text bits, while leaving any html tags intact. – Coo Mar 07 '14 at 04:37

score 0 · Answer 3 · answered Mar 07 '14 at 05:01

How about a regex to replace the /'s with /<wbr>?

$('#test-div').html($('#test-div').html().replace(/(<)?[/]/g, function($0,$1){ 
    return $1?$0:'/<wbr>';
}));

/(<)?[/]/g will look for all forward slashes, but also take special note of any closing tags.

return $1?$0:'/<wbr>'; will ignore </, but replace any other / with /<wbr>

You may want to consider closing the wbr tag off.

score 0 · Answer 4 · answered Mar 07 '14 at 05:04

0

Have you tried something like this?

$('#test-div').html().replace('/', '/<wbr>');

answered Mar 07 '14 at 05:04

domdomcodecode

2,355
4
19
27

score 0 · Answer 5 · answered Mar 07 '14 at 05:23

0

because when you say first it give you [object Text] and text property not work with it, easiest solution is:

$("#test-div").contents()[0].textContent="Something";

Jsfiddle demo

answered Mar 07 '14 at 05:23

Zaheer Ahmed

28,160
11
74
110

score 0 · Accepted Answer · edited May 23 '17 at 12:09

Eventually I found my own answer thanks to this and this item. I now have a function that replaces all text in all text nodes in context. It can also insert HTML into said nodes.

JavaScript function:

function recursiveReplace(node, oldValue, newValue) {
    if (node.nodeType === 3) { // text node
        $(node).replaceWith(node.nodeValue.replace(oldValue, newValue));
    } else if (node.nodeType === 1) { // element
        $(node).contents().each(function() {
            recursiveReplace(this, oldValue, newValue);
        });
    }
}

//To call
div = $('#test-div');
recursiveReplace(div[0], "/", "/<wbr />");

This solved it in a generic way.

Jquery $(element).contents().first().text("new text") doesn't work?

6 Answers6