How to get a copy of text inside a div which is not wrapped inside any HTML tag?

Question

I am trying to grab the text inside a div container and perform some logic based upon the text content instead of changing it. I tried to use Node.childNodes but it returns a live Nodelist instead of a copy.

Here is the DOM structure, I am trying to grab text without a container from it only.

<div class="container" > <span >text inside span</span> text without a container <button>text inside button new</button> <button>text inside button</button> </div>

Any ideas?

EDIT:

Desired Output:

'text without a container' as a string

Which is your code? try to use <> for create a complete snippet. can you write the desired output? — Simone Rossaini
– Simone Rossaini, Commented Mar 23, 2021 at 14:44
Did you do anything with your node list? like loop over it and try something like a .text() ? — Culyx
– Culyx, Commented Mar 23, 2021 at 14:44
Does this answer your question? get text of an element without children in javascript — Heretic Monkey
– Heretic Monkey, Commented Mar 23, 2021 at 14:48
@SimoneRossaini I am not sure if my code would help understanding the issue, I have updated the question to include desired output. — Amir
– Amir, Commented Mar 23, 2021 at 14:52

yaakov · Accepted Answer · 2021-03-23 14:56:40Z

You can use this:

const parent = document.getElementById('parent'); const nodes = parent.childNodes; let text = ""; for (let node of nodes) { if (node.nodeName === '#text') { text += node.textContent.trim(); } } console.log('Final result: ', text);

<div id="parent"> <span>Inside span</span> I'm free! as a bird! <span>I wish I was</span> </div>

This will loop through all of the child nodes and will only extract text that is not within another element.

Collectives™ on Stack Overflow

How to get a copy of text inside a div which is not wrapped inside any HTML tag?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related