CODEWITHSUNDEEP
javascripthtmlcss
Andre
Andre

Reputation: 638

Get plain text from child tags

I'm using highlight.js to input a custom CSS code, but that library add span tags to the text I want to get

for example

<pre>
<code class="language-css hljs" contenteditable="true" id="css-code">
<span class="token selector"><span class="hljs-selector-class">.spacer-line</span></span> <span class="token punctuation">{</span>
    <span class="token property"><span class="hljs-attribute">border-bottom-width</span></span><span class="token punctuation">:</span> <span class="hljs-number">20px</span><span class="token punctuation">;</span>
    <span class="token property"><span class="hljs-attribute">width</span></span><span class="token punctuation">:</span> <span class="hljs-number">50%</span><span class="token punctuation">;</span>
    <span class="token property"><span class="hljs-attribute">border-color</span></span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code>
</pre>

the plain text for that is:

.spacer-line { border-bottom-width: 20px; width: 50%; border-color: black; }

I need to get this. how can I get it?

UPDATE

for any reason if I use this code:

let value = document.querySelector('pre');
console.log(value.textContent);

I get the pre tag and the code tag but without span tags value result:

<pre class=" language-css"><code class="language-css hljs" contenteditable="true" id="css-code"></code>
</pre>

and a blank value for textContent

Upvotes: 0

Views: 39

Answers (1)

Mamun
Mamun

Reputation: 68923

You can select the element and get the text content of the element using innerText or textContent:

console.log(document.querySelector('pre').textContent.trim())
<pre>
<code class="language-css hljs" contenteditable="true" id="css-code">
<span class="token selector"><span class="hljs-selector-class">.spacer-line</span></span> <span class="token punctuation">{</span>
    <span class="token property"><span class="hljs-attribute">border-bottom-width</span></span><span class="token punctuation">:</span> <span class="hljs-number">20px</span><span class="token punctuation">;</span>
    <span class="token property"><span class="hljs-attribute">width</span></span><span class="token punctuation">:</span> <span class="hljs-number">50%</span><span class="token punctuation">;</span>
    <span class="token property"><span class="hljs-attribute">border-color</span></span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code>
</pre>

Upvotes: 2

Related Questions