使用jQuery实现可复制分享的带时间戳YouTube链接生成工具

核心实现逻辑 #

你可以按照「输入监听→链接解析处理→时间参数按规则拼接→结果输出」的流程实现需求，全程用原生JavaScript即可完成，不需要额外依赖：

• 第一步：给原始链接输入框、时/分/秒三个时间输入框都绑定input事件，只要任意输入框内容变化，就触发链接生成函数，实现实时更新效果
• 第二步：解析校验原始链接：用浏览器原生URL对象解析用户输入的链接，自动处理参数格式问题，同时删除链接中可能自带的旧t参数，避免重复拼接导致链接失效；如果用户输入的不是合法链接，直接给出提示
• 第三步：校验时间值合法性：分别读取三个时间输入框的值，转成整数后判断是否为大于等于0的有效数字，空值、负数、非数字都判定为无效值，直接跳过
• 第四步：拼接时间参数：
  • 如果三个时间字段全是无效值，直接返回清理完旧参数的原始链接，不追加时间参数
  • 如果存在至少一个有效时间值，按照「小时→分钟→秒」的顺序拼接参数段：小时有效值后加h后缀，分钟有效值后加m后缀，秒有效值后加s后缀，最后通过URL对象的searchParams方法自动追加t参数，不需要手动判断拼接?还是&，避免格式错误

核心代码示例 #

你可以把下面的逻辑套到已经搭好的页面框架里，注意替换成你自己页面里对应的元素选择器即可：

// 获取页面元素
const rawLinkInput = document.querySelector('#raw-link');
const hourInput = document.querySelector('#input-hour');
const minuteInput = document.querySelector('#input-minute');
const secondInput = document.querySelector('#input-second');
const resultOutput = document.querySelector('#final-link');

function generateTimedLink() {
  const rawValue = rawLinkInput.value.trim();
  // 原始链接为空时直接清空结果
  if (!rawValue) {
    resultOutput.value = '';
    return;
  }

  try {
    const url = new URL(rawValue);
    // 读取并校验时间值
    const hour = parseInt(hourInput.value);
    const minute = parseInt(minuteInput.value);
    const second = parseInt(secondInput.value);
    
    let timeStr = '';
    // 按h→m→s顺序拼接有效时间
    if (!isNaN(hour) && hour >= 0) timeStr += `${hour}h`;
    if (!isNaN(minute) && minute >= 0) timeStr += `${minute}m`;
    if (!isNaN(second) && second >= 0) timeStr += `${second}s`;

    if (timeStr) {
      // 有有效时间就设置t参数，自动处理参数前缀问题
      url.searchParams.set('t', timeStr);
    } else {
      // 无有效时间就移除已有的t参数
      url.searchParams.delete('t');
    }

    resultOutput.value = url.toString();
  } catch (err) {
    // 链接格式不合法时提示
    resultOutput.value = '请输入有效的YouTube链接';
  }
}

// 绑定实时更新事件
[rawLinkInput, hourInput, minuteInput, secondInput].forEach(el => {
  el.addEventListener('input', generateTimedLink);
});

移动端优化建议 #

• 三个时间输入框设置type="number"、min="0"属性，移动端会自动唤起数字键盘，同时原生限制不能输入负数，降低输入成本
• 给分、秒输入框加输入校验，输入值超过59时实时提示，避免生成的链接跳转时间错误
• 增加一键复制按钮，点击后直接把生成的链接复制到用户剪贴板，减少长按选择的操作步骤
• 如果需要兼容youtu.be/xxx格式的短链接，上述URL对象的处理逻辑已经可以自动适配，不需要额外写判断

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