Express+MongoDB+EJS项目：点击Modify按钮如何获取contenteditable修改值？

以下两种方法都能实现点击Modify按钮时获取编辑后的内容，你可以根据需求选择：

方法一：结合表单与隐藏字段（传统方式） #

步骤1：修改HTML结构 #

给可编辑元素和表单添加标识，新增隐藏字段用来传递数据：

<tr>
  <th>
    <!-- 用data-short绑定当前短链接，方便匹配对应行 -->
    <div contenteditable="true" class="editable-url" data-short="<%=shortURL.short%>">
      <a href="<%=shortURL.full%>"><%=shortURL.full%></a>
    </div>
  </th>
  <th>
    <a href="<%=shortURL.short%>"><%=shortURL.short%></a>
  </th>
  <th>
    <form action="/delete" method="POST">
      <button type="submit" name="button" value="<%=shortURL.short%>">Delete url</button>
    </form>
  </th>
  <th>
    <!-- 修改表单action为你的更新接口，比如/update -->
    <form action="/update" method="POST" class="modify-form">
      <!-- 隐藏字段：传递要修改的短链接标识 -->
      <input type="hidden" name="shortURL" value="<%=shortURL.short%>">
      <!-- 隐藏字段：存储编辑后的完整URL -->
      <input type="hidden" name="newFullURL" class="new-url-input">
      <button type="submit" name="modify">Modify</button>
    </form>
  </th>
</tr>

步骤2：添加JavaScript处理逻辑 #

监听表单提交事件，获取可编辑内容并赋值给隐藏字段：

// 遍历所有修改表单
document.querySelectorAll('.modify-form').forEach(form => {
  form.addEventListener('submit', function(e) {
    // 获取当前行的短链接标识
    const shortURL = this.querySelector('input[name="shortURL"]').value;
    // 匹配对应可编辑元素
    const editableDiv = document.querySelector(`.editable-url[data-short="${shortURL}"]`);
    
    // 获取编辑后的纯文本内容（如果需要保留HTML结构，改用innerHTML）
    const newFullURL = editableDiv.textContent.trim();
    
    // 赋值给隐藏字段，随表单提交到后端
    this.querySelector('.new-url-input').value = newFullURL;

    // 可选：添加URL合法性验证
    // if (!isValidURL(newFullURL)) {
    //   e.preventDefault();
    //   alert('请输入合法的URL');
    //   return;
    // }
  });
});

// 可选：URL验证工具函数
function isValidURL(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

方法二：用Fetch API直接发送请求（无表单方式） #

如果不想依赖表单，可以直接用JS发送异步请求：

步骤1：修改HTML按钮部分 #

去掉表单，给按钮添加标识：

<tr>
  <th>
    <div contenteditable="true" class="editable-url" data-short="<%=shortURL.short%>">
      <a href="<%=shortURL.full%>"><%=shortURL.full%></a>
    </div>
  </th>
  <th>
    <a href="<%=shortURL.short%>"><%=shortURL.short%></a>
  </th>
  <th>
    <form action="/delete" method="POST">
      <button type="submit" name="button" value="<%=shortURL.short%>">Delete url</button>
    </form>
  </th>
  <th>
    <!-- 改成普通按钮，绑定data-short属性 -->
    <button type="button" class="modify-btn" data-short="<%=shortURL.short%>">Modify</button>
  </th>
</tr>

步骤2：添加Fetch请求逻辑 #

// 遍历所有修改按钮
document.querySelectorAll('.modify-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const shortURL = this.dataset.short;
    const editableDiv = document.querySelector(`.editable-url[data-short="${shortURL}"]`);
    const newFullURL = editableDiv.textContent.trim();

    // 可选：URL合法性验证
    if (!isValidURL(newFullURL)) {
      alert('请输入合法的URL');
      return;
    }

    // 发送POST请求到后端更新接口
    fetch('/update', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      // 编码参数避免特殊字符问题
      body: `shortURL=${encodeURIComponent(shortURL)}&newFullURL=${encodeURIComponent(newFullURL)}`
    })
    .then(response => response.json())
    .then(data => {
      // 处理后端返回结果
      if (data.success) {
        alert('修改成功');
        window.location.reload(); // 刷新页面更新内容
      } else {
        alert('修改失败');
      }
    })
    .catch(error => {
      console.error('请求出错:', error);
      alert('请求出错，请稍后重试');
    });
  });
});

// 可选：URL验证工具函数
function isValidURL(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

关键注意事项 #

• 内容获取方式：textContent取纯文本，适合存储URL；innerHTML会保留HTML结构，根据需求选择。
• 唯一性标识：用data-short绑定每行的短链接，确保能精准匹配对应可编辑元素，避免多行混淆。
• 参数编码：传递特殊字符时用encodeURIComponent编码，防止请求参数出错。

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