Output word by word of paragraph using jQuery

jQuery code snippet which outputs each word in a sentence at a specified interval. You can change the speed at which is outputs by the speed parameter in milliseconds. You can view the demo or load the code in jsfiddle below.

DEMO

jQuery

$(document).ready(function () {
    var $el = $('div'),
        text = $el.text(),
        speed = 1000; //ms

    $el.empty();

    var wordArray = text.split(' '),
        i = 0;

    INV = setInterval(function () {
        if (i >= wordArray.length - 1) {
            clearInterval(INV);
        }
        $el.append(wordArray[i] + ' ');
        i++;
    }, speed);
});

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi libero aliquam aut commodi illum fuga consequatur labore iste necessitatibus quidem atque aliquid iusto numquam tempora rerum excepturi officiis maiores. Ab?

Load in jsfiddle

Typewriter Plugin

There is a really good typewriter jQuery plugin which acts like a Typewriter which may be of use.

Frequently Asked Questions (FAQs) about jQuery Text Output

How can I use jQuery to output text in a specific div?

To output text in a specific div using jQuery, you need to use the .text() method. This method sets or returns the text content of selected elements. When this method is used to return content, it returns the text content of all matched elements. When used to set content, it sets the text content of all matched elements. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
$("#test").text("Hello world!");
});
});
In this example, when the button is clicked, the text of the div with id “test” is set to “Hello world!”.

How can I use jQuery to output text word by word?

To output text word by word using jQuery, you can use the .split() method to split the text into an array of words, and then use a loop to output each word individually. Here’s an example:

var text = $("#myDiv").text();
var words = text.split(" ");
$.each(words, function(i, word){
$("#output").append(word + "<br>");
});
In this example, the text of the div with id “myDiv” is split into an array of words, and then each word is appended to the div with id “output”, followed by a line break.

How can I use jQuery to output text in a paragraph?

To output text in a paragraph using jQuery, you can use the .append() or .html() method to add a paragraph element with the desired text to a specific element. Here’s an example:

$("#myDiv").append("<p>This is a paragraph.</p>");
In this example, a paragraph with the text “This is a paragraph.” is appended to the div with id “myDiv”.

How can I use jQuery to output text with AJAX?

To output text with AJAX using jQuery, you can use the .ajax() method or the shorthand methods .get() or .post(). These methods send an asynchronous HTTP request to a server and can be used to retrieve or send data. Here’s an example:

$.get("test_ajax.txt", function(data, status){
$("#myDiv").html(data);
});
In this example, the .get() method is used to retrieve the content of the file “test_ajax.txt”, and then the content is set as the HTML of the div with id “myDiv”.

How can I use jQuery to output text with a delay?

To output text with a delay using jQuery, you can use the .delay() method in combination with the .fadeIn() or .show() method. The .delay() method sets a delay for all queued functions on the selected elements. Here’s an example:

$("#myDiv").delay(2000).fadeIn().text("Hello world!");
In this example, the text “Hello world!” is set for the div with id “myDiv” after a delay of 2000 milliseconds (2 seconds), and then the div is gradually made visible with the .fadeIn() method.