Question

我使用 highlight.js 输入自定义 CSS 代码，但该库向我想要获取的文本添加了 span 标签

例如

<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>

纯文本是：

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

我需要得到这个。 我怎样才能得到它？

更新

出于任何原因，如果我使用此代码：

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

我得到了 pre 标签和 code 标签，但没有 span 标签值结果：

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

以及 textContent 的空白值

Answer 1

您可以选择元素并使用innerText或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>

从子标签获取纯文本

1 个答案: