页面底部JS生成Div内URL预览，如何通过onkeyup触发重执行？

Hey Brian, 这问题我熟！核心就是把生成URL预览的逻辑改成可重复调用的形式，然后在textarea内容更新（或者div内容变化）时重新触发它，给你两种靠谱的解决方案：

方案1：直接绑定textarea的输入事件（最直观） #

首先把你页面加载时执行的那堆生成URL预览的代码，抽成一个独立函数——这样想什么时候调用就什么时候调用。然后给textarea绑定input事件，每次输入内容更新div后，立刻调用这个函数重新生成预览。

举个代码例子：

// 把生成URL预览的逻辑封装成可复用函数
function generateUrlPreviews() {
  const previewContainer = document.getElementById('your-div-id');
  // 这里放你原来页面加载时写的生成预览的代码
  // 比如遍历div文本识别URL、替换成预览卡片之类的操作
}

// 页面初始化时先执行一次
document.addEventListener('DOMContentLoaded', () => {
  generateUrlPreviews();

  // 获取你的textarea元素
  const textInput = document.getElementById('your-textarea-id');
  // 绑定输入事件，实时响应内容变化
  textInput.addEventListener('input', () => {
    // 先更新div内容（这部分是你已经写好的逻辑）
    const previewContainer = document.getElementById('your-div-id');
    previewContainer.innerHTML = textInput.value; // 或者用textContent，按需选择

    // 关键一步：重新生成URL预览
    generateUrlPreviews();
  });
});

方案2：用MutationObserver监听div变化（更灵活） #

如果除了textarea，还有其他操作可能更新这个div的内容，那用MutationObserver监听div的内容变化会更省心——不管div被什么方式修改，只要内容变了，就自动触发预览生成。

代码示例：

function generateUrlPreviews() {
  const previewContainer = document.getElementById('your-div-id');
  // 同样是你原来的生成预览逻辑
}

document.addEventListener('DOMContentLoaded', () => {
  generateUrlPreviews();

  const previewContainer = document.getElementById('your-div-id');
  // 创建观察者实例，监听div内容变化
  const contentObserver = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      // 只要div内容有变动，就重新生成预览
      generateUrlPreviews();
    });
  });

  // 配置观察者：监听子节点、文本内容的变化（包含子元素的文本变动）
  contentObserver.observe(previewContainer, {
    childList: true,
    characterData: true,
    subtree: true
  });

  // 你的textarea更新div的逻辑保持不变
  const textInput = document.getElementById('your-textarea-id');
  textInput.addEventListener('input', () => {
    previewContainer.innerHTML = textInput.value;
  });
});

小提醒 #

如果你的生成预览代码是直接替换div内容的，记得每次调用generateUrlPreviews前，先把div的内容重置成原始文本（比如从textarea里获取的最新内容），不然可能会重复生成预览，导致DOM结构混乱。

内容的提问来源于stack exchange，提问作者Brian T.