Character count in innerHTML

Question

In html, how to count the real characters shown in a innerHTML?

For example, In <strong>Hi</strong>, the # of characters should be 2, not 19.

I've tried 2 methods which do not work:

1. str.length - This will include <> characters.
2. getElementById - This will include <> characters:

I tried as follows:

elem_output = document.getElementById("example_id"); 
elem_output.innerText.length;//1st
elem_output.textContent.length;//2nd

Answer 1

I don't know which element has #example_id in your code, but element.innerText.length should work.

Edit: Other answers suggest the use of textContent instead of innerText. I think that depending on OP's real needs one or the other (or even innerHTML, which appears in question's title) could be suitable. So, I'd suggest to read carefully the differences between those properties in the docs:

• Differences between innerText and textContent
• Diferences between innerHTML and textContent

Edit 2: OP's question says real characters shown in a innerHTML, so I'd go with innerText since:

innerText is aware of style and will not return the text of hidden elements, whereas textContent will.

var tag = document.getElementById('test');
console.log(tag.innerText.length)

<strong id="test">Hi</strong>

Answer 2

var html='<div>div1</div><div>div2</div>';
console.log( 
    html.replace(/<(?:.|\n)*?>/gm, '').length
);

Answer 3

Try this

var p=document.createElement("p")
p.innerHTML="<strong>Hi</strong>"
alert(p.querySelector("strong").innerHTML.length)

If you have data in html then you can also try following

alert(document.getElementsByTagName("strong")[0].innerText.length);
//Or
alert(document.getElementsByTagName("strong")[0].innerHTML.length);
//Or
alert(document.querySelector("strong").innerHTML.length);
//Or
alert(document.querySelector("strong").innerText.length);

<strong>Hi</strong>

Answer 4

I guess there can be a lot of different html tags within your text so there's three way of doing things

If you need to use regex to filter specific tags then innerHTML would be the way to get what you need.

var exampleid = document.getElementById('example_id').innerHTML;
exampleid = exampleid.replace(/<[^>]strong>/g, ""); 
alert(exampleid.length + ' characters.');

<div id="example_id">hi, <strong>I'm bold and my tags are ignored</strong> while <i>I'm Italic but my tags are counted</i>.</div>

See : Regular Expression: exclude html tags from "content"

---

If you wish to ingore all tags then use innerText or textContent.

innerText :

var exampleid = document.getElementById('example_id').innerText.length;
alert(exampleid + ' characters.');

<div id="example_id">hi, <strong>I'm bold</strong> while <i>I'm Italic</i>.</div>

textContent (careful textContent a W3C standard, it is not supported by IE < 9) :

var exampleid = document.getElementById('example_id').textContent.length;
alert(exampleid + ' characters.');

<div id="example_id">hi, <strong>I'm bold</strong> while <i>I'm Italic</i>.</div>

Learn more on the differences between all these : Difference between innerText and innerHTML in javascript

Answer 5

What about this for <strong>Hi</strong>

document.getElementsByTagName("strong").innerText.length;

Answer 6

You want to use Node.textContent.

var element = document.querySelector('#some-element');
var length = element.textContent.length;

It's the simplest and elegant solution.