jQuery replace only the text of a node, ignoring current internal nodes

Question

I have some HTML:

<label>Search:
  <input id="search-box" type="text"/>
</label>

If I want to change the words "Search:" to "Quick Search:", how can I select just the "Search:" text using jQuery/JS?

I have tried html(), text(), and other various jQuery methods. My goal is to NOT have to copy the input box and then append it after. Is it possible?

P.S. I know I can use the prepend() function, but my goal here is to replace that text entirely, and I'd like to know how to do this in the future as well.

Thanks a bunch.

Answer 1

If you have access to the HTML I'd wrap the text in a span so that you can address it easily. However, with what you have so far you can simply iterate over all nodes in the element and change the textContent of the first text node (nodeType==3):

$(function(){
    
    $("label").contents().each(function() {
        if(this.nodeType == 3){
            this.textContent = "Quick Search: ";
            return false;
        }
    })
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Search:
  <input id="search-box" type="text"/>
</label>

Answer 2

To do it you would need to look at the text nodes. You get them by using contents(). This solution below is a little overkill, but this shows you how to look for a textNode (type 3) and look to see if the text has Search in it.

var textNodes = $("label")
  .contents()
  .filter(function() {
    return this.nodeType === 3 && this.nodeValue.indexOf("Search")>-1; 
  }).each( function() { this.nodeValue = this.nodeValue.replace("Search", "Quick Search"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Search:
  <input id="search-box" type="text"/>
</label>

You can get rid of the filter and just do it all in the each and break out if you want.

var textNodes = $("label")  //should use a better selector
  .contents()
  .each(function() {
      if( this.nodeType === 3 && this.nodeValue.indexOf("Search")>-1 ) {   
          this.nodeValue = this.nodeValue.replace("Search", "Quick Search");
          return false; 
      }
  );

Answer 3

You can do this with straight Javascript...no jQuery needed. You just need to access the first node in the label and change the value.

document.querySelectorAll('label')[0].firstChild.nodeValue = "Quicksearch: ";

<label>Search:
  <input id="search-box" type="text"/>
</label>

Answer 4

Try to remove all text part from label, and then insert another text

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

$('label input').before('Quick Search: ');

---

For reusable porpose, you can extend jQuery adding a method for that.

(function($) {

    $.fn.replaceText = function(oldText, newText) {
        this.contents().each(function(){
            if (this.nodeType === 3) {
                this.textContent = this.textContent.replace(oldText, newText);
            }
        });
        return this;
    };

}(jQuery));

$('label').replaceText('Search', 'Quick Search');

Answer 5

I get the result but with dataTable search id :

$(document).ready(function(){
    $('#myTable').DataTable();
        
    $("#myTable_filter label").contents().each(function() {
        if(this.nodeType == 3){
            this.textContent = "Quick Search:";
            return false;
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="myTable">
  <thead>
    <tr><th>Col-1</th><th>Col-2</th></tr>
  </thead>
  <tbody>
    <tr><td>name 1</td><td>User-1</td></tr>
    <tr><td>name 2</td><td>User-2</td></tr>
    <tr><td>name 3</td><td>User-3</td></tr>
  </tbody>
</table>

Answer 6

Further to @jlbruno's answer here's a jQuery-free method that iterates over every label and case-insensitively replaces every instance of Search with Quick Search regardless of the position of the textNode.

(function(){
    
    var labels = document.querySelectorAll('label');
    for (l = 0; l < labels.length; ++l){
        var label = labels[l],
            nodes = label.childNodes;
        for (n = 0; n < nodes.length; ++n){
            var node = nodes[n];
            if(node.nodeType===3 && node.textContent.toLowerCase().indexOf("search")>=0){
             node.textContent = node.textContent.replace(/search/i,"Quick Search");
            }
        }
    }
    
})();

<label>Search:
  <input name="search" type="search"/>
</label>
<br />
<label>Do you like bees?
  <input name="beesPlease" type="checkbox"/>
</label>
<br />
<label>
    <textarea name="textarea">this instance of search will not be changed</textarea>
</label>
<br />
<label>Search This Mofo: 
  <input name="search-this" type="text"/>
</label>
<br />
<label>Fill me 
  <input name="search-that" type="text"/>
  with your search.
</label>

Answer 7

You could create a span tag inside the label and before the input. Give the span a id attribute and replace text inside that span with your text. It's better to prevent using html replacement for this.

Answer 8

You'd need to put it in a separate element, you can't grab and update just the text and not the input with the way it's laid out currently.

The easiest way would be to use a span tag and then modify that like this:

<label id="my-label"><span>Search:</span>
  <input id="search-box" type="text"/>
</label>

and then use this to do modify it:

$('#my-label > span').text('Quicksearch:');

Fiddle: http://jsfiddle.net/orj8gkxc/