将SanitizeFunction与React onPaste集成

Question

用例：

I有一个用例，用户可以在textArea中粘贴以下字符串之一，并且必须格式化为新行：

空格(例如: 12，2，3)

• Comma-newline (例如: 12，\n2，\n，\n)

• Newline (例如: 12\n2 \n3 \n)

我尝试使用onPaste functionality，但不确定如何将这个用例与React onPaste集成

我有这个清理实用程序，它接受粘贴输入(string)并返回一个数组。

function sanatizeToArray(str){
    str=str || "";
    str = str.replaceAll(" ",""); // get rid of spaces!
    str = str.replaceAll("\n",","); // change new lines into commas
    str = str.replaceAll(",,",","); // get rid of duplicates
    return str.split(","); // break it down!
}

sanatizeToArray("12, 2, 3"); // Prints ["12", "2", "3"]
sanatizeToArray("12,\n2,\n3,\n"); // Prints ["12", "2", "3", ""]
sanatizeToArray("12\n2\n3\n"); // Prints ["12", "2", "3", ""]

如果有人能帮助将这个sanitizeArray函数与onPaste集成起来，我将非常感激。

Answer 1

从您在注释中提供的代码示例来看，您的onPaste集成运行良好。您的清洁功能也运行良好，具体取决于您要做的是什么。

从字面上说，在文本区域中键入\n与键入实际的换行符不一样，因为\n在文本区域中输入时会自动转义到\\n。这意味着像Hello\nWorld\n!这样的字符串将被处理为Hello\\nWorld\\n!，而您的replaceAll调用将无法找到任何换行字符。

如果您想测试将实际的换行粘贴到您的输入中(这是更有可能的输入)，那么复制粘贴这个块，您会注意到您的代码工作得很好：

12
2
3

如果您也想替换转义的换行字符，那么只需添加一个额外的replaceAll调用：

str = str.replaceAll("\\n", ",");

虽然我怀疑这是否有必要。