含%0A换行符的JS代码在控制台可用但书签工具失效的问题

1. 统一处理换行符，兼容Bookmarklet与控制台 #

别手动写%0A，改用encodeURIComponent('\n')自动生成编码后的换行符。这样既不会在Bookmarklet中被解析为换行破坏代码结构，控制台运行时也能正确生成%0A。

示例代码片段：

// 替换手动写%0A的逻辑
const encodedNewLine = encodeURIComponent('\n');
const processedText = `Text-1${encodedNewLine}${originalText}`;

// 如果API接收URL编码后的完整内容，直接对拼接后的文本编码更可靠
const encodedText = encodeURIComponent(`Text-1\n${originalText}`);

如果POST请求用JSON或FormData格式传递，直接用原生换行符\n即可，让浏览器自动处理编码，避免手动编码出错：

// 用fetch发送JSON格式请求
await fetch('/api/update-message', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    msgId: msgId,
    content: `Text-1\n${originalText}`
  })
});

2. 修复末尾字符丢失问题 #

末尾两个字符丢失大概率是文本处理环节的截断错误，检查以下几点：

• 确认获取原始消息的DOM节点正确，优先用输入框的value属性而非innerText/textContent，避免获取到隐藏的格式字符
• 排查代码中是否存在多余的截断逻辑（比如误用slice(0, -2)这类代码）
• 调试时打印原始文本、处理后文本的长度，对比API实际接收的参数，定位截断发生的环节

3. 通用Bookmarklet写法（与控制台代码完全兼容） #

把代码包裹在自执行异步函数中，所有特殊字符通过encodeURIComponent处理，既保证Bookmarklet不解析出错，控制台直接运行也完全正常：

javascript:(async function(){
  // 以下代码和控制台运行的逻辑完全一致
  const msgId = document.querySelector('[data-msg-id]').dataset.msgId;
  const editNode = document.querySelector('.message-editor');
  const originalText = editNode.value;
  
  // 拼接新内容
  const newContent = `Text-1\n${originalText}`;
  
  // 调用API更新
  await fetch(`/api/messages/${msgId}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `content=${encodeURIComponent(newContent)}`
  });
  
  // 更新编辑框显示
  editNode.value = newContent;
})();

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