How to extract text directly under an HTML tag using Javascript

Question

I need to extract the text that is directly under an HTML tag. For example, if my HTML looks like:

<span>This is Outside Text
      <span>This is Inside Text</span>
</span>

then I need a way to extract ONLY "This is Outside Text" and NOT "This is Inside Text". I have tried "innerHTML", innerText", "textContent" and also tried to use RegEx (although I am not very good at it). But I am unable to find a solution. Any help would be much appreciated.

Please note that due to some technical constraints, I need to use "plain" Javascript ONLY and NOT jQuery (which I know is nothing but Javascript, but I am forbidden from using it for this solution)

document.getElementById("spanId").textContent should work i think. — btevfik, Mar 23 '13 at 20:04
Yes I can. The task at hand is to programmatically assign IDs to all spans which have direct text under them, and skip those which have just other HTML tags, but no text of their own. Here I asked just the part of the problem I am stuck with. — Prashant, Mar 23 '13 at 20:05
already tried textContent as I mentioned in my question itself. It gives the text inside the sub-tags as well — Prashant, Mar 23 '13 at 20:06
"technical constraints"? Read this: [What are some empirical technical reasons not to use jQuery?](http://stackoverflow.com/q/5099949/1493698) — Antony, Mar 23 '13 at 20:16

score 1 · Answer 1 · answered Mar 23 '13 at 20:12

1

With your HTML structure you can try this - DEMO

alert ( document.querySelector( "span" ).firstChild.nodeValue );

answered Mar 23 '13 at 20:12

Zoltan Toth

46,981
12
120
134

this doesn't work if he has some other text after the inner span, right? – btevfik Mar 23 '13 at 20:22
@btevfik yes, it works.. the quantity of children doesn't make a difference for the first child - http://jsfiddle.net/3PKmn/1/ – Zoltan Toth Mar 23 '13 at 20:25
i am only seeing "This is Outside Text" – btevfik Mar 23 '13 at 20:26
@btevfik hmm.. isn't that the requirement? get the text which comes before all the inner html tags? – Zoltan Toth Mar 23 '13 at 20:27
i thought he was asking for all the text that is under the first span – btevfik Mar 23 '13 at 20:29
@btevfik now when you mentioned that I'm not sure anymore :) let's wait for the OP to clarify this – Zoltan Toth Mar 23 '13 at 20:41
Yes, I need all the text under the first span, even if it is at the end of the span, as long as it is not in some other tag as well. – Prashant Mar 23 '13 at 20:48
@Prashant i think my solution works for you. it might not be the best one though. – btevfik Mar 23 '13 at 20:49

btevfik · Answer 2 · 2013-03-23T20:34:32.703

0

you can do it like this. it also works if you have more text after the second span.

 <span id="span1">This is Outside Text
  <span id="span2">This is Inside Text</span>
 </span>


var element = document.getElementById("span1");
var element2 =  document.getElementById("span2");

var text = element.textContent.replace(element2.textContent, "");

alert(text);

http://jsfiddle.net/btevfik/y58xJ/

edited Mar 23 '13 at 20:34

answered Mar 23 '13 at 20:15

btevfik

3,391
3
27
39

score 0 · Answer 3 · answered Mar 23 '13 at 22:04

You are looking for the text children (childNodes of type 3):

var children=document.getElementById("mySpan").childNodes,
    count=children.length,
    text="";

for (var i=0;i<count;i++) {
    if (children[i].nodeType==3) {
        text+=children[i].nodeValue;
    }
}

Live demo: http://jsfiddle.net/aDgPj/

How to extract text directly under an HTML tag using Javascript

3 Answers3