Is there any way to check if text is inside html tag?

Question

Let suppose I need to extract every text from specific html tag:

HTML:

<div id="container">
<div id="subject">

<span><a></a></span>

</div>
</div>

var subject = document.getElementById('subject').innerHTML;
console.log(subject); // <span><a></a></span>

So we don’t have any text inside, but if there is - how to check if there is text outside of <> tags inside our specific html element?

fiddle for better visualization - http://jsfiddle.net/kxarc6o3/

Iterate through the child nodes of the element, and find all the text nodes. — Barmar, Dec 15 '18 at 02:05
@RandyCasburn `textContent` will return text that's inside nested tags. They only want the text that's not inside the tags. — Barmar, Dec 15 '18 at 02:06
No, OP said _text from **specific** html tag_; then shows code that selects `div` with `id="subject"` — Randy Casburn, Dec 15 '18 at 02:06
@Barmar - perhaps we need clarification on what the OP _really_ wants. — Randy Casburn, Dec 15 '18 at 02:09
@RandyCasburn What do you think **outside of <> tags inside our specific html element** means? — Barmar, Dec 15 '18 at 02:11
Sure - I want text outside the <> tags. So any text INSIDE 'subject' but outside and . — Proo1931, Dec 15 '18 at 02:12
@Proo1931 Change your example so there's text in all the tags, and then show the desired result. — Barmar, Dec 15 '18 at 02:13

score 2 · Accepted Answer · edited Oct 06 '22 at 09:31

2

The best way is to go for innerText, innertHTML gives you the entire content within the tag including the html tags it holds and the html its child or decendents holds. innerText always gives you the text it contains(only the element not its decendents).

in your example

<span id ='spanid'>hello<a>hi</a></span>

document.getElementbyID('spanid').innerText will only give hello, as a string

whereas document.getElementbyID('spanid').innerHTML will give the entire hmtl contains it has inside it (here hello<a>hi</a> ) in a string format.

To get innerText of all possible elements inside the span tag you need to use recursion, there is no other way as we dont know how many children or decedents it has.

printInnerText(ele){
 if(ele.childNodes.length >= 1){
    children = ele.childNodes;
    for(var i=0;i<children.length;i++)
     printInnerText(children[i])
 }else{
    console.log(ele.innerText);
 }
}

edited Oct 06 '22 at 09:31

Aliaksei

3,542
1
16
21

answered Dec 15 '18 at 02:10

Dip686

641
6
16

You're ignoring the qualifier **outside of <> tags**. – Barmar Dec 15 '18 at 02:12
Nice, but I really don't know what tags are inside 'subject' and I need every fragment of text that also could be inside (text) and or whatever tag is inside. – Proo1931 Dec 15 '18 at 02:15
if i am understanding your query you want only the innerTExt of all possible elements the span tag has? @Proo1931 – Dip686 Dec 15 '18 at 02:17
recursion then :) you always learn something new, thanks guys this is exactly what I need. – Proo1931 Dec 15 '18 at 06:26
ok, so this function should looks like this - http://jsfiddle.net/kxarc6o3/1/ it would be nice remove enters, and tabs - otherwise there are many more childNodes. – Proo1931 Dec 15 '18 at 07:37
What do you mean by saying removing tabs and enters ? @Proo1931 – Dip686 Dec 15 '18 at 13:50
var childrens = ele.childNodes; show (console.log(childrens); - I have test it only on chrome) that when you have enter (new line) inside id=subject div (or tab), that it is count as another childNodes (means undefined at results count). So if you html is displayed as:
|enter - new line| |tab| |enter - new line|
- this gives wrong results but this:
is ok. Anyway almost nobody write html tags without tabs or spaces or enters. – Proo1931 Dec 15 '18 at 19:40

score 0 · Answer 2 · answered Dec 15 '18 at 02:17

You can use HTML DOM innerHTML property like this:

if(document.getElementById("container").innerHTML.length > 0)
    console.log(document.getElementById("container").innerHTML);

Or using Jquery:

if($("#container").html().length > 0)
    console.log($("#container").html());

Is there any way to check if text is inside html tag?

2 Answers2