Wrap first text node inside an element with mixed content with another div

Question

Is there a way to wrap this text W'ñÝÃáèTÿpê !!!_W in the following html structure with <div></div> using jQuery / javascript ?

<div id="jqgh_PageGrid_ControlType" class="ui-jqgrid-sortable">
    W'ñÝÃáèTÿpê !!!_W<span class="s-ico" style="display:block">
        <span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span>
        <span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span>
    </span><button class="grid-header-filter-btn ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="">
        <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
        <span class="ui-button-text"></span>
    </button>
</div>

Look at [the answer](http://stackoverflow.com/a/7256972/315935) which describes how to implement wrapping in column headers. — Oleg, Aug 07 '15 at 06:31
@RohitKumar are you still following this question? -I've posted a generic solution below... — Mikk3lRo, Aug 11 '15 at 16:37

score 1 · Answer 1 · answered Aug 07 '15 at 05:22

1

use the following jQuery code.

$('<div>').append($.trim($('.ui-jqgrid-sortable').text()))

answered Aug 07 '15 at 05:22

Imesh Chandrasiri

5,558
15
60
103

this will fetch all text within that div. its risky if in future any further text is introduced in following span tags it will break. Moreover this string "W'ñÝÃáèTÿpê !!!_W" is dynamic is there a way to reach that string by jquery/javascript – Rohit Kumar Aug 07 '15 at 05:54
The `text()` will only fetch text values inside the selector. If the content is dynamic, how are you appending it to the document. If its some sort of a server side code, then u would be able to wrap what ever the text which is printed using that server script! – Imesh Chandrasiri Aug 07 '15 at 05:58
yes and this selector is too big $('.ui-jqgrid-sortable') and this will fetch any string within this div
Its jqGRID.JS i dont have controll over its html structure.
– Rohit Kumar Aug 07 '15 at 06:02
I have other columns in the Grid whose text will be diffrent in diffrent languages. So wanted it a bit genric – Rohit Kumar Aug 07 '15 at 06:04

score 0 · Answer 2 · answered Aug 07 '15 at 05:23

0

This should do as you requested.

You could use the following to replace the first occurrence of a word within the body of the page:

var replaced = $("body").html().replace('W'ñÝÃáèTÿpê !!!_W','<div>W'ñÝÃáèTÿpê !!!_W</div>');
$("body").html(replaced);

If you wanted to replace all occurrences of a word, you need to use regex and declare it global /g:

var replaced = $("body").html().replace(/W'ñÝÃáèTÿpê !!!_W/g,'<div>W'ñÝÃáèTÿpê !!!_W</div>');
$("body").html(replaced);

answered Aug 07 '15 at 05:23

Carsten Løvbo Andersen

26,637
10
47
77

this string "W'ñÝÃáèTÿpê !!!_W" is dynamic is there a way to reach that string by jquery/javascript – Rohit Kumar Aug 07 '15 at 05:51
You should inform us about how you get the dynamic content. is it from jquery? razor? or something else? – Carsten Løvbo Andersen Aug 07 '15 at 10:19

score 0 · Answer 3 · answered Aug 07 '15 at 05:30

$("#jqgh_PageGrid_ControlType").html(function(){
  return this.innerHTML.replace("W'ñÝÃáèTÿpê !!!_W",'<div style="color:red;">Whatever</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="jqgh_PageGrid_ControlType" class="ui-jqgrid-sortable">
        W'ñÝÃáèTÿpê !!!_W<span class="s-ico" style="display:block">
            <span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span>
            <span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span>
        </span><button class="grid-header-filter-btn ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="">
            <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
            <span class="ui-button-text"></span>
        </button>
    </div>

this string "W'ñÝÃáèTÿpê !!!_W" is dynamic is there a way to reach that string by jquery/javascript – — Rohit Kumar, Aug 07 '15 at 05:52
I have other columns in the Grid whose text will be diffrent in diffrent languages. So wanted it a bit genric — Rohit Kumar, Aug 07 '15 at 06:05
you should give more information about what exactly your intention. — Lin Yuan, Aug 07 '15 at 08:56

score 0 · Answer 4 · answered Aug 10 '15 at 18:12

You can get all child nodes including text nodes using the jQuery function contents().

You can then filter the nodes by type using the jQuery function filter().

Finally use the jQuery function first() to only grab the first of the text nodes (the code you posted has only one, but who knows what may be added if you aren't in control)

...so this will grab the first text node that is a direct descendant of the #jqgh_PageGrid_ControlType <div> and wrap it in an brand new (aggressively red) <div>:

$('#jqgh_PageGrid_ControlType').contents().filter(function(){
    return this.nodeType === 3;
}).first().wrap('<div style="background:#f00">');

score -1 · Answer 5 · answered Aug 07 '15 at 06:00

-1

you can also do that in native javascript like this.

     var jqgh_PageGrid_ControlType = document.getElementById('jqgh_PageGrid_ControlType');

         jqgh_PageGrid_ControlType.innerHTML = jqgh_PageGrid_ControlType.innerHTML.replace("W'ñÝÃáèTÿpê !!!_W", "<div>W'ñÝÃáèTÿpê !!!_W</div>");

answered Aug 07 '15 at 06:00

Ram

1
2

The string is dynamic so you would not be able to use this code in the long run! – Imesh Chandrasiri Aug 07 '15 at 06:01

Wrap first text node inside an element with mixed content with another div

5 Answers5