JQuery: Cut off div text after 4 characters

Question

I only want to display the first four characters of a div, but it seems to be more difficult than needed and google isn't very helpful. Different variations of this don't seem to work:

$("#div").html(this.html().substring(0,4));

I really want to avoid having an extra variable in there that stores the text first.

Answer 1

Use a callback for the .html(),

$('#div').html(function(i, currentHtml) {
  return currentHtml.substring(0, 4);
});

Demo

You can also use .text() in this case if the div consists only of plain text.

$("#div").text(function(i, currentText) {
    return currentText.substring(0, 4);
});

---

Refer :

Slice vs Substring

Turns out substring is relatively faster.

JsPerf test : slice() vs substring() vs others

Answer 2

If the div elements contains any HTML (html elements) then .html() return the it's as a string. Example

Note: (It's completely depend on the inner content of you div)

If you want to truncate the plain text, you should use .text() instead of using .html()

Try this:

$("#div").text(function(){   
    return $(this).text().substring(0,4);
});

Working Fiddle

Answer 3

Try this :

$("#div").html(function(){
    return $(this).html().substring(0,4)
    });

It will count space also...If any there.

Like DIV have "test four 3" will give you output "test"

Answer 4

Use slice() for this purpose :

$("#div").text(function(){   
    return $(this).text().slice(0,4);
});