如何用JavaScript实现输入Instagram ID后点击跳转对应主页

以下是两种可直接使用的实现方式：

前置修正 #

你提供的HTML代码中a标签的target属性存在笔误，标准新窗口打开属性为_blank（单下划线），修正后的HTML如下：

<div class="container">
  <div class="main">
    <input type="text" placeholder="instagram ID" id="IG-page">
    <a href="#" target="_blank" id="link">go to page</a>
  </div>
</div>

方案1：输入时实时更新跳转链接（推荐） #

该方案会在用户输入ID的同时实时更新跳转链接的href属性，点击即可直接跳转，交互更流畅：

// 绑定DOM元素
const igInput = document.getElementById('IG-page');
const jumpLink = document.getElementById('link');

// 监听输入框内容变化
igInput.addEventListener('input', () => {
  const inputId = igInput.value.trim();
  // 有有效输入时更新链接，无输入时重置为#避免无效跳转
  jumpLink.href = inputId ? `https://instagram.com/${inputId}?utm_medium=copy_link` : '#';
});

方案2：点击链接时动态构造跳转地址 #

该方案在用户点击链接时才读取输入内容构造地址，适合需要额外添加输入校验的场景：

const igInput = document.getElementById('IG-page');
const jumpLink = document.getElementById('link');

jumpLink.addEventListener('click', (e) => {
  // 阻止默认的空链接跳转行为
  e.preventDefault();
  const inputId = igInput.value.trim();
  
  // 可在此处添加自定义校验逻辑，例如非空校验
  if (!inputId) {
    alert('请输入有效的Instagram ID');
    return;
  }
  
  // 构造目标地址并在新窗口打开
  const targetUrl = `https://instagram.com/${inputId}?utm_medium=copy_link`;
  window.open(targetUrl, '_blank');
});

可选优化 #

如果需要限制输入的ID格式，可通过正则表达式过滤特殊字符，避免构造出无效的跳转链接。

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