jQuery change/replace Text

jQuery change/replace Text

jQuery change/replace text; In this tutorial, you will learn how to change or replace text of selected html elements like div, span, p, etc using jQuery text() method. And as well as how to get html elements text using the jQuery text() method.

jQuery Change/replace Text

The text () method is used for set or return the content of the selected HTML elements. When setting content, it overwrites the content of all matching elements. This returns the content of the text method () is used to return the text content of all matching elements.

Syntax of jQuery text() method

$(selector).text()  

This is used to return content.

$(selector).text(content)  

This is used to set content.

$(selector).text(function (index, currentcontent))  

Text() method is used to set content by calling function.

Parameters of text() method

ParameterDescription
Content It is used to set the new text content for the element.
Function (index,currentcontent) It is used to specify a function that will return the new text content for the selected elements.
index:- It returns the index position of the element.
currentcontent:- It returns the current content of element.

Example 1 of jQuery replace paragraph Text

Let’s see example 1 of the text() method to change or replace paragraph text:

<!DOCTYPE html>  
<html>  
<title>Learn Jquery text Method</title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#btn_click").click(function(){  
        $("#para").text("Hello there, this is example");  
    });  
});  
</script>  
</head>  
<body>  
<button id="btn_click">Click here to change the content</button>  
<p id="para">This is a paragraph. When you click the button after that it will change.</p>  
</body>  
</html>  

Example 2 – jQuery get text element

Let’s see example 2 of text() method, How to get the text inside an element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Text Content Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
 
    $(".plain-text").click(function(){
        alert($(".plain").text());
    });
    
    $(".formatted-text").click(function(){
        alert($(".formatted").text());
    });
});
</script>
</head> 
<body>
    <p class="plain">This is plain text.</p>
    <p class="formatted">This <strong>is</strong> formatted <b> text </b> .</p>

    <button type="button" class="plain-text">Plain Text</button>
    <button type="button" class="formatted-text">Formatted Text</button>
</body>
</html>                            

Example 3 – jQuery replace/change div text By Id

Let’s see below the example for how to replace the current text using the text() and replace() function of jquery.

<!DOCTYPE html> 
<html> 
<head> 
<title> jQuery replace text </title>        
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
</head> 
    
<body style = "text-align:center;"> 
            
  <div class="text_div">
      This div contains some text.
  </div>
    
  <button id="btn-click">Click</button> 
    <script> 
        $(document).ready(function(){ 
              $(".text_div").text(function () {
                
                return $(this).text().replace("contains", "Hello replace");

            }); 
        }); 
    </script> 
</body> 
</html> 

Recommended jQuery Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *