如何通过JavaScript实现textarea/文本输入框直引号自动转弯引号？

完全可以实现，该功能通常被称为智能引号自动替换，核心逻辑是监听输入事件，根据输入位置的上下文判断将用户输入的直引号替换为对应的左/右弯引号即可，具体实现方案如下：

替换规则说明 #

• 若直引号出现在行首、空格、常用标点（逗号、句号、左括号、破折号等）之后，替换为左弯引号“
• 其余场景替换为右弯引号”
• 单引号的替换逻辑一致，对应替换为‘和’即可

原生JS实现代码 #

const smartQuoteReplace = (e) => {
  const inputEle = e.target;
  const cursorStart = inputEle.selectionStart;
  const cursorEnd = inputEle.selectionEnd;
  const content = inputEle.value;

  // 仅处理刚刚输入的直引号位置
  if (content[cursorStart - 1] === '"') {
    // 取当前引号前一位的字符判断类型
    const prevChar = cursorStart > 1 ? content[cursorStart - 2] : '';
    const isLeftQuote = !prevChar || /\s|[(\[{<,.;:?!\-=+*/]/.test(prevChar);
    const targetQuote = isLeftQuote ? '“' : '”';

    // 替换字符
    inputEle.value = content.slice(0, cursorStart - 1) + targetQuote + content.slice(cursorStart);
    // 重置光标位置，避免替换后光标跳转到内容末尾
    inputEle.selectionStart = inputEle.selectionEnd = cursorStart;
  }
}

// 绑定到需要生效的输入组件
document.querySelector('textarea').addEventListener('input', smartQuoteReplace);
document.querySelector('input[type="text"]').addEventListener('input', smartQuoteReplace);

注意事项 #

• 替换完成后必须手动重置光标位置，否则会破坏正常的输入体验
• 若使用React、Vue等前端框架，不要直接操作DOM，可在输入组件的change回调中完成值替换，同时调用selection相关API调整光标位置即可
• 如需支持嵌套引号等复杂排版场景，可额外统计当前内容中左弯引号的数量，若为奇数则后续输入替换为右弯引号，偶数则替换为左弯引号，可大幅降低规则误判概率

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