js 从样式代码元素中复制干净的代码

Question

我正在使用highlight.js，生成了一个块：

<pre class="code code-javascript"><label>JS</label><code class="language-javascript">equation_app.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">e</span>=&gt;</span>{
  autofocus(e);
  <span class="hljs-keyword">let</span> start = editor.selectionStart;
  <span class="hljs-keyword">let</span> end = editor.selectionEnd;
  tagging(<span class="hljs-string">'$'</span>, <span class="hljs-string">'$'</span>);
  editor.focus();
  <span class="hljs-keyword">if</span>(editor.selectionStart === editor.selectionEnd)editor.selectionStart = editor.selectionEnd = start + <span class="hljs-number">1</span>;
  refresh();
});</code><div class="copy">click to copy</div></pre>

我制作了一个按钮来单击以将文本复制到用户的剪贴板。

function copy_to_clipboard(stritem){
    const el = document.createElement('textarea');
    el.value = stritem;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    window.alert('Successfully copied to your clipboard!'); 
}

但是，我不能直接调用copy_to_clipboard(codeElement.innerHTML)，因为所有的 html 样式都被复制进去了。

我想知道是否有一种方法可以从样式化的 Dom <code> 元素中提取干净的代码

Answer 1

不要使用innerHTML，而是使用textContent，比如：

function copy_to_clipboard() {
  const el = document.createElement('textarea');
  el.value = document.querySelector('code').textContent;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  window.alert('Successfully copied to your clipboard!');
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<pre class="code code-javascript">
<label>JS</label>
<code class="language-javascript">
equation_app.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">e</span>=&gt;</span>{
  autofocus(e);
  <span class="hljs-keyword">let</span> start = editor.selectionStart;
  <span class="hljs-keyword">let</span> end = editor.selectionEnd;
  tagging(<span class="hljs-string">'$'</span>, <span class="hljs-string">'$'</span>);
  editor.focus();
  <span class="hljs-keyword">if</span>(editor.selectionStart === editor.selectionEnd)editor.selectionStart = editor.selectionEnd = start + <span class="hljs-number">1</span>;
  refresh();
});
</code>
<div class="copy" onclick="copy_to_clipboard()">click to copy</div>
</pre>

参考：

• textContent