Javascript textContent returns undefined

Go To StackoverFlow.com

1

This is my code:

var text1 = "↵,<strong>bla bla</strong>";//here text1 has value
text1 = text1.textContent;//here it is undefined

Why? And how to resolve it?

2012-04-04 08:13
by petko_stankoski
What exactly are you trying to do? - ThiefMaster 2012-04-04 08:17
@ThiefMaster Remove the tags - petko_stankoski 2012-04-04 08:17


1

You can use jQuery for such task.

First add reference to jQuery library, then it's as simple as this:

var text1 = "↵,<strong>bla bla</strong>";//here text1 has value
text1 = $("<div>").html(text1).text();
alert(text1);​

Live test case.

2012-04-04 08:19
by Shadow Wizard
-1. That's absurd. There is no need for any library here - RobG 2012-04-04 08:31
@RobG feel free to come with pure JavaScript then - I'm just suggesting something widely known and used to save hundreds of lines of self coding - Shadow Wizard 2012-04-04 08:35
@ShadowWizard But for this value: "↵,Tilsæt lidt fedt " it gives me error - petko_stankoski 2012-04-04 08:45
No need, there are already 2 good answers. Lines of code is not a metric clients care much about, nor is "less code" of any value in itself - RobG 2012-04-04 08:48
@RobG parsing HTML and removing tags might get very complicated. I would prefer to have one line of code to do that instead of learning long hours how to do that myself. (And end up failing - Shadow Wizard 2012-04-04 08:50
@Srcee see my edit. My original code would give empty string back, no error. I fixed that anyway to handle such cases - Shadow Wizard 2012-04-04 08:51
You can always create a function for it - then you do have a one-liner to do the job. See my answer for the non-jQuery code to do it - ThiefMaster 2012-04-04 09:26
@ThiefMaster forgot about the existence of textContent (too used to IE only innerText) are you sure this covers all cases including complicated HTML structures - Shadow Wizard 2012-04-04 09:48
I haven't tested it but I'm pretty sure that's what jQuery does when using .text()ThiefMaster 2012-04-04 09:57
@ThiefMaster cheers, I'll leave this answer be as alternative for those already using jQuery anyway - Shadow Wizard 2012-04-04 09:58
@Srcee please see this answer as well for a rather simple way without need for jQuery library - Shadow Wizard 2012-04-04 09:59
@ShadowWizard—no one suggested parsing the HTML. I've added a very simple function to get the text, it's a couple of lines of basic code. How many hours? Oh, about 1 minute (as long as it took to type the characters) - RobG 2012-04-05 04:34
@RobG this has already been suggested and I have notified the OP - more than that I can't really do, and like I said - if one is already using jQuery it's easier to use what it already has to offer so this answer does have value to other people thus I don't want to delete it - Shadow Wizard 2012-04-05 07:20


7

text1 is a plain string, not a DOM element.

As you can see in MDN, textContent is a property of Node objects. String objects on the contrary do not have such a property.

And since removing tags is a pretty simple task where it does not make sense to add a rather big library (even though jQuery is great as soon as you want to do more stuff with the DOM), here's a simple way to do it:

var elem = document.createElement('div');
elem.innerHTML = '<strong>hi &amp; bye</strong>';
alert(elem.textContent || elem.innerText || ''); // displays "hi & bte"
2012-04-04 08:15
by ThiefMaster
Not supported in IE8 and below. elem.innerText || elem.textContent should work though - Shadow Wizard 2012-04-04 09:46
@thief—you can use alert(elem.textContent || elem.innerText || '');RobG 2012-04-05 04:36


4

text1 is a string, not a DOM node.

You would need to turn the HTML into a DOM (either by adding it to a document with innerHTML or by writing/finding a JS DOM parser) before you can use DOM methods on it.

2012-04-04 08:15
by Quentin


2

Others have given you the answer, I'll just comment.

While textContent has been around since DOM 3 Core (about 8 years) most browsers have implemented the (MS proprietary) innerText property. So if you have a node, you can do:

var theTextContent = typeof node.textContent == 'string'? node.textContent : node.innerText;

or write a more robust function.

Edit

here's a full solution:

function getText(el) {
  return el.textContent || el.innerText || '';
}

var text1 = "<strong>bla bla</strong>"
var d = document.createElement('div');
d.innerHTML = text1;

alert(getText(d)); // bla bla
2012-04-04 08:44
by RobG
Ads