通过三次单击选择文本或“过度选择”会在粘贴时出现新行-解网

问：

使用 React/Ts，我有一个显示用户输入的方法：

function displayMsg({ msg}: UsrMsg) {

    return (
       <div>
          {msg.split('\n').map((line) => (
             <Fragment>{line}</Fragment>
          ))}
       </div>
    );
}

问题是，当单击三下然后复制和粘贴时，我在粘贴的文本中得到了一行额外的行，如下所示：

输入单行：

blabla msg

输出两行：

blabla msg

输入：多线

bla1
bla2
bla3

输出：多行。

只有在单击 3 次选择、复制然后粘贴后才会发生这种情况。使用正常的 2 次点击选择，不存在此问题：/

bla1
bla2
bla3

我尝试使用 whiteSpace 道具来玩 CSS，但这并没有区别。:(

该问题在 Firefox、chrome 和 edge 上是一致的。

编辑1：

使用的操作系统是 windows。我还没有在其他操作系统上测试过它。

编辑 2：

我怀疑 HTML 标签与 3 次点击选择或“过度选择”一起被复制，因此在粘贴时显示为换行符。

在互联网上可以看到很多同样的问题。每个例子，以 Worldcounter.net 这是一张图片，向您展示了世界计数器的结果！

尝试复制如图所示的所选文本，然后将其粘贴:)

HTML CSS ReactJS 打字稿

我尝试在浏览器上单击任何页面，然后将该文本复制粘贴到 Notepad++ 中。之后，我通过进入 > > 启用了一个设置。我发现在某些页面上，三次单击复制的文本（来自某些标签，如 p 标签、li 标签）包含控制字符。控制字符告诉下一个字符进入下一行，然后转到该行的开头。View TabShow SymbolShow All CharactersCRLFCRLF

溶液：

尝试将该模式更改为目标角色。\n\r\nCRLF
此外，您还可以过滤结果，以删除空字符。通过在 msg 上使用，then & 使用返回元素，这些元素是 true（not null， undefined， “”） & then .trim()splitfiltermap
```
<div>
  {msg.trim().split('\r\n').filter(e => e).map((line) => (
      <Fragment>{line}</Fragment>
   ))}
</div>
```

请阅读：

CRLF ： https://developer.mozilla.org/en-US/docs/Glossary/CRLF

如果您仍有疑问，请发表评论

上一个：如何检查按钮是否有活动类？[关闭]

下一个：全屏页眉下方的内容使页眉/整页（？）略微向右溢出

通过三次单击选择文本或“过度选择”会在粘贴时出现新行

Selecting text by triple click or 'overselecting' results in new Lines upon pasting