get innerText with jQuery instead of innerHTML

Question

I have a figcaption and i would like the text from it. This is what it looks like in the element inspector in chrome. For some reason the 'innerHTML' starts with a return and then a lot of spaces. The 'innerText' however looks good so i'm interested in that.

enter image description here

Online I see I have to use the text() method to get the innerText but it seems to give the innerHTML:

console.log("-"+$(this).find("figcaption").text()+"-");

enter image description here

So how can I get to the innerText?

I think it is indeed returning the innerText. Notice that there are no html tags in the resulting output. — Kolban
– Kolban, Commented Nov 3, 2014 at 18:26
You could use replace after text(), like: .replace(/( ){2,}/gi, "red"). It will remove all extra spaces. — klauskpm
– klauskpm, Commented Nov 3, 2014 at 18:32
@Kolban But there are no spaces in the innerText in the dom. — clankill3r
– clankill3r, Commented Nov 3, 2014 at 18:41
@klauskpm nice, this brings me somewhere. I only have a return at the start. Could I also get rid of that. And this is just modifying the innerHTML instead of the innerText right? — clankill3r
– clankill3r, Commented Nov 3, 2014 at 18:42
Well, text() is supposed to return innerText. You are also receving return as part of the text? — klauskpm
– klauskpm, Commented Nov 3, 2014 at 19:04

Kolban · Accepted Answer · 2014-11-03 19:04:53Z

7

When you create an HTML element such as:

<p>Hello          World</p>

When that is rendered by the browser, whitespace is collapsed by default. The result will be "Hello World". That collapsing of the data happens at browser rendering time. The DOM model contained within the browser maintains the actual text including any white spaces contained within it. As such, what you see on the screen may not be the same as the data contained within the DOM.

The white space stripped data is available via the DOM property called "innerText".

A jsBin sample showing the data has been supplied.

The demonstration code is basically:

HTML

<p id="here">Hello      World</p>
<button>Show</button>

JavaScript

$(function() {
  $("button").click(function() {
    console.log("text: " + $("#here").text());
    console.log("innerText: " + $("#here").prop("innerText"));
  });
});

The console will log:

text: Hello      World
innerText: Hello World

From your original question, the use of the text() method returns the DOM data while the use of prop("innerText") returns the calculated innerText value that the browser built.

edited Nov 3, 2014 at 19:04

answered Nov 3, 2014 at 18:31

Kolban

15.4k3 gold badges46 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

clankill3r Over a year ago

If I look in the dom (see screenshot OP), then innerHTML has those whitespace, innerText however has not. So is assume innerText is ok without having the need to edit. In case it matters, it's the text from adding photo's to tumblr. So those added whitespaces make no sense anyway.

Kolban Over a year ago

Thanks for the comment. Ive updated the answer with more details and a sample.

Collectives™ on Stack Overflow

get innerText with jQuery instead of innerHTML

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related