一键复制多动态blockquote及SRT导入、clipboard.js多元素复制技术问题

问题1：批量复制Original text到copy original text列表 #

原transferData函数仅处理单行内容，修改为遍历所有表格行完成批量复制：

function transferData() {
  // 获取表格所有行
  const rows = document.querySelectorAll('.rebaz tbody tr');
  rows.forEach(row => {
    // 获取当前行Original text的内容
    const originalContent = row.querySelector('td:first-child blockquote').innerText;
    // 赋值到对应行的copy original text区块
    row.querySelector('td:last-child blockquote').innerText = originalContent;
  });
}

问题2：解决SRT文件被拆分为两部分的问题 #

问题源于字幕块分割正则不兼容多系统换行，且解析逻辑错误提取了字幕结构，修改后的parseSrt函数：

function parseSrt(srt) {
  // 兼容Windows(\r\n)和Unix(\n)换行格式
  const subtitleBlocks = srt.trim().split(/\r?\n\s*\r?\n/);
  const subtitles = subtitleBlocks.map(subtitleBlock => {
    const lines = subtitleBlock.split(/\r?\n/).filter(line => line.trim() !== '');
    if (lines.length < 3) return null; // 过滤无效字幕块

    const index = lines[0];
    const timeString = lines[1];
    const textLines = lines.slice(2);

    const [startTimeString, endTimeString] = timeString.split(" --> ");
    const text = textLines
      .join("\n")
      .replace(/<[^>]*>/g, "")
      .replace(/\{.*?\}/g, '');
    return { vtr: index, text };
  }).filter(item => item !== null);
  return subtitles;
}

问题3：一键复制多个元素到剪贴板 #

方法1：原生API实现（无需额外库） #

function copyAllText() {
  let copyContent = '';
  // 收集所有Original text内容
  document.querySelectorAll('.rebaz tbody td:first-child blockquote').forEach(block => {
    copyContent += block.innerText + '\n\n'; // 用空行分隔不同内容
  });

  // 写入剪贴板
  navigator.clipboard.writeText(copyContent).then(() => {
    alert('已复制所有内容到剪贴板');
  }).catch(err => {
    console.error('复制失败:', err);
  });
}

方法2：clipboard.js实现 #

1. 引入clipboard.js：

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>

2. 初始化并实现复制逻辑：

let clipboard;
$(document).ready(function() {
  // 创建临时隐藏元素用于承载合并后的文本
  const tempEl = $('<textarea id="temp-copy" style="position:absolute;left:-9999px;"></textarea>');
  $('body').append(tempEl);

  clipboard = new ClipboardJS('#copy-all-btn', {
    text: function() {
      let copyContent = '';
      $('.rebaz tbody td:first-child blockquote').each(function() {
        copyContent += $(this).text() + '\n\n';
      });
      $('#temp-copy').val(copyContent);
      return $('#temp-copy').val();
    }
  });

  clipboard.on('success', function(e) {
    alert('已复制所有内容到剪贴板');
    e.clearSelection();
  });

  clipboard.on('error', function(e) {
    console.error('复制失败:', e);
  });
});

// 页面销毁时清理资源
$(window).on('beforeunload', function() {
  clipboard.destroy();
  $('#temp-copy').remove();
});

3. 添加复制按钮：

<button type="button" id="copy-all-btn">一键复制所有内容</button>

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