Javascript 使用草稿js自动大写句子的第一个字母

我正在使用Reactjs和draftjs库创建一个富文本编辑器。我想自动大写一个句子的第一个字母

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} 
        autoCapitalize="sentences"/>
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

从“React”导入React；
从“react dom”导入react dom；
从“草稿js”导入{Editor，EditorState}；
类MyEditor扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={editorState:editorState.createEmpty（）}；
this.onChange=（editorState）=>this.setState（{editorState}）；
}
render（）{
返回(
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

---

我创建的组件在句点后不会自动大写。为什么自动资本化不起作用？有没有更好的办法让它发挥作用

我发现自己与Draft.js处于相同的情况：需要实现自动资本化，但发现内置的Draft道具没有任何作用，因此我制定了自己的方法来实现这一点

这是我创建的一个实用函数，用于查询Draft.js中光标前的字符：

const getCharsPrecedingFocus = (
  contentState: any,
  selectionState: any,
  numberOfChars: number,
): string => {
  const currentBlock =
    contentState.getBlockForKey(selectionState.getAnchorKey());
  const currentBlockText = currentBlock.getText();
  const endOfText = selectionState.getEndOffset();

  return currentBlockText.slice(
    endOfText - numberOfChars,
    endOfText,
  );
};

现在我们可以检查一个新句子的开头是否有一个应该大写的字符。将此代码放入作为道具传递的

handleBeforeInput

方法中：

const handleBeforeInput = (chars: string, editorState: any) => {
  const NON_CAPITALISED_REGEX = /^(?:\.\s)([a-z])$/;

  if (NON_CAPITALISED_REGEX.test(precedingThreeChars)) {
    const autoCapitaliseMatch =
      precedingThreeChars.match(NON_CAPITALISED_REGEX);
    if (autoCapitaliseMatch && autoCapitaliseMatch[1]) {
      const capitalisedChar = autoCapitaliseMatch[1].toUpperCase();

      const contentStateWithCapitalisedChar = Modifier.replaceText(
        contentState,
        selectionState.merge({
          anchorOffset: focusOffset - 1,
          focusOffset: focusOffset,
        }),
        capitalisedChar + chars,
      );

      EditorState.push(
        editorState,
        contentStateWithCapitalisedChar,
        'insert-characters'
      );
      return 'handled';
    }
  }
}

其他一些注意事项：

我使用

test

RegEx方法检查与自动大写模式匹配的字符串，而不是

match

，因为这是一个每次用户按键时都会调用的操作，

test

应该比

match

更快。尽管除非你处理的是很长的文档，否则它可能不会对用户体验产生影响

*编辑：在我发布的原始代码中，我忘记了定义前面的三个字符。只需像下面这样添加

常量=
GetCharsReceidingFocus（contentState，selectionState，3）
自动资本化功能在哪里？它是草稿js编辑器组件的内置功能。链接：那些文档和从它们链接的MDN表示它被委托给了一个非标准的浏览器功能，可能是您正在测试的浏览器不支持它吗？我正在使用Google chrome和Safari。如果您使用正则表达式，只需将句点后的第一个字符本身替换为大写，则使用onChange函数可以更轻松地自动大写。