如何从highlight.js渲染的带样式code元素中提取纯净代码用于剪贴板复制

直接使用DOM元素的textContent属性即可提取无HTML标签的纯净代码。这个属性会自动忽略所有元素标签，仅返回节点内的原始文本内容，代码原本的换行、缩进都会完整保留，完全适配代码复制的需求。

注意不要用innerText替代：innerText的返回值会受页面CSS渲染规则影响，可能丢失代码的缩进、特殊空格，textContent是直接读取DOM树中的原始文本内容，更适合代码提取场景。

修改示例 #

将原调用代码：

copy_to_clipboard(codeElement.innerHTML)

替换为：

copy_to_clipboard(codeElement.textContent)

可选优化 #

1. 代码内容清洗：如果返回的内容存在多余空行，可以用正则简单处理：

const pureCode = codeElement.textContent.replace(/\n{3,}/g, '\n\n').trim()
copy_to_clipboard(pureCode)

2. 复制接口升级：你当前使用的document.execCommand('copy')已被现代浏览器标记为废弃，可升级为原生Clipboard API，同时兼容旧浏览器：

async function copy_to_clipboard(stritem){
    try {
        await navigator.clipboard.writeText(stritem)
        alert('已成功复制到剪贴板！')
    } catch (err) {
        // 降级兼容旧版浏览器
        const el = document.createElement('textarea')
        el.value = stritem
        document.body.appendChild(el)
        el.select()
        document.execCommand('copy')
        document.body.removeChild(el)
        alert('已成功复制到剪贴板！')
    }
}

内容的提问来源于stack exchange，提问作者Weilory