当内容包含pre时,在class="copy_btn"中自动输出复制按钮

如果要在页面上的一个元素中包含了“pre”的文本时，自动在该元素的"class"属性中添加"copy_btn"并在页面上输出一个复制按钮，可以使用JavaScript和jQuery来实现。

一种方式是在页面加载完成后使用jQuery的 ":contains" 选择器来选择所有包含 "pre" 文本的元素，然后为这些元素添加 "copy_btn" 类名，并在其中插入一个复制按钮。

示例代码:

$(document).ready(function() {
    $("*:contains('pre')").addClass("copy_btn");
    $(".copy_btn").append("<button class='copy-btn'>复制</button>")
});

要实现复制功能,需要使用Clipboard API,示例代码:

document.querySelector('.copy-btn').addEventListener('click', function(event) {
  var pre = this.closest("pre");
  var text = pre.textContent;
  var dummy = document.createElement("input");
  document.body.appendChild(dummy);
  dummy.setAttribute("id", "dummy_id");
  document.getElementById("dummy_id").value=text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
});

其中,第一个代码块在页面加载完成后为所有包含pre的元素添加了class= "copy_btn" 并在其中插入了一个复制按钮;第二个代码块是复制按钮的监听事件,当点击复制按钮时,会获取该复制按钮所在的pre标签中的文本,然后将其复制到剪贴板中.