js скопируйте чистый код из элемента стилизованного кода

#javascript #html #highlightjs

Вопрос:

Я использую 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>=amp;></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">'

Я сделал кнопку, чтобы нажать, чтобы скопировать текст в буфер обмена пользователя.

 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 - стиля копируются.

Интересно, есть ли способ извлечь чистый код из стилизованного <code> элемента Dom

Ответ №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>=amp;></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">'


Ссылка:

Комментарии:

1. потрясающе, ура!!

</span>, <span class="hljs-string">'Я сделал кнопку, чтобы нажать, чтобы скопировать текст в буфер обмена пользователя.


Однако я не могу напрямую позвонить copy_to_clipboard(codeElement.innerHTML) , так как все элементы html - стиля копируются.

Интересно, есть ли способ извлечь чистый код из стилизованного <code> элемента Dom

Ответ №1:

Вместо использования innerHTML используйте textContent как:



Ссылка:

Комментарии:

1. потрясающе, ура!!

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

Я сделал кнопку, чтобы нажать, чтобы скопировать текст в буфер обмена пользователя.


Однако я не могу напрямую позвонить copy_to_clipboard(codeElement.innerHTML) , так как все элементы html - стиля копируются.

Интересно, есть ли способ извлечь чистый код из стилизованного <code> элемента Dom

Ответ №1:

Вместо использования innerHTML используйте textContent как:



Ссылка:

Комментарии:

1. потрясающе, ура!!

</span>, <span class="hljs-string">'

Ссылка:

Комментарии:

1. потрясающе, ура!!

</span>, <span class="hljs-string">'Я сделал кнопку, чтобы нажать, чтобы скопировать текст в буфер обмена пользователя.


Однако я не могу напрямую позвонить copy_to_clipboard(codeElement.innerHTML) , так как все элементы html - стиля копируются.

Интересно, есть ли способ извлечь чистый код из стилизованного <code> элемента Dom

Ответ №1:

Вместо использования innerHTML используйте textContent как:



Ссылка:

Комментарии:

1. потрясающе, ура!!

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

Я сделал кнопку, чтобы нажать, чтобы скопировать текст в буфер обмена пользователя.


Однако я не могу напрямую позвонить copy_to_clipboard(codeElement.innerHTML) , так как все элементы html — стиля копируются.

Интересно, есть ли способ извлечь чистый код из стилизованного <code> элемента Dom

Ответ №1:

Вместо использования innerHTML используйте textContent как:



Ссылка:

Комментарии:

1. потрясающе, ура!!

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

Ссылка:

Комментарии:

1. потрясающе, ура!!

</span>, <span class=»hljs-string»>’Я сделал кнопку, чтобы нажать, чтобы скопировать текст в буфер обмена пользователя.


Однако я не могу напрямую позвонить copy_to_clipboard(codeElement.innerHTML) , так как все элементы html — стиля копируются.

Интересно, есть ли способ извлечь чистый код из стилизованного <code> элемента Dom

Ответ №1:

Вместо использования innerHTML используйте textContent как:



Ссылка:

Комментарии:

1. потрясающе, ура!!

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

Я сделал кнопку, чтобы нажать, чтобы скопировать текст в буфер обмена пользователя.


Однако я не могу напрямую позвонить copy_to_clipboard(codeElement.innerHTML) , так как все элементы html — стиля копируются.

Интересно, есть ли способ извлечь чистый код из стилизованного <code> элемента Dom

Ответ №1:

Вместо использования innerHTML используйте textContent как:



Ссылка:

Комментарии:

1. потрясающе, ура!!