如何返回原始文本并保持其形状和结构？

Question

我创建了一个迷你应用程序，用户可以在其中粘贴任何文本并共享它。假设用户在下面输入这些文本。

前任。

????
????
??(¯`v´¯)
???`.¸.[Stackoverflow]

当我将它加载到 textarea 时，它显示正确。

关联

但是当我回到原状时

我一直在显示内联（损坏）

???? ???? ??(¯`v´¯) ???`.¸.[Stackoverflow]

关联

---

我所做的就是这个

public function raw($uuid)
{
    $paste  = Paste::where('uuid', base64_decode($uuid))->first();

    if($paste->type == 'json'){
        return response()->json($paste->data);
    } else {
        return $paste->raw;
    }
    
}

如何保持与在 textarea 中呈现的格式相同的格式？

---

例 2。

在文本区域显示

???????????????????????
??????????????????????
??????????????????????
???????????????????????

原始响应

正如你在 raw 中看到的那样，它显示得非常糟糕......

??????????????????????? ?????????????????????? ?????????????????????? ???????????????????????

---

编辑

如果我将它包裹在pre标签周围

return '<textarea style="width: 100%; height: 100%;">'. $paste->raw.'</textarea>';

我得到了更好的结果

Answer 1

不必将文本包装在<pre></pre>标签中，只需将 CSS 属性white-space: pre应用于您收集该文本的任何 textarea 或其他元素。

这是preCSS 属性的文档：MDN Web Docs：white-space

这将迫使换行符得到尊重。那也应该复制和粘贴就好了。您现有的解决方案似乎对我来说也可以很好地复制和粘贴。确保为该文本框使用等宽字体，因为这是保持所有列对齐所必需的。

您可以在 Google Fonts 上找到许多很棒的免费等宽字体选项：https : //fonts.google.com/? category =Monospace

例子

没有 white-space: pre

** 确保单击下面的“运行代码片段”按钮以查看渲染的预览

<div id="ascii-art" contenteditable>????
????
??(¯`v´¯)
???`.¸.[Stackoverflow]</div>

? 随着 white-space: pre和等宽字体

** 确保单击下面的“运行代码片段”按钮以查看渲染的预览

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

#ascii-art {
  font-family: 'Roboto Mono', monospace;
  white-space: pre;
}

<div id="ascii-art" contenteditable>????
????
??(¯`v´¯)
???`.¸.[Stackoverflow]</div>

奖金

如果你想让所有的角色紧密并相互对抗，请添加以下 CSS：

white-space: pre;
font-family: consolas;
letter-spacing: -0.3px;
line-height: 1.19;

当您更改字体系列和字体大小时，需要稍微调整字母间距和行高值。这是您提供的两幅作品的 CSS 效果：

#ascii-art {
  white-space: pre;
  font-family: consolas;
  letter-spacing: -0.3px;
  line-height: 1.19;
}

<div id="ascii-art" contenteditable>???????????????????????
??????????????????????
??????????????????????
???????????????????????

????
????
??(¯`v´¯)
???`.¸.[Stackoverflow]</div>

Answer 2

如果您想不在内部使用它<pre>，默认情况下会保留换行符并且还使用等宽字体。

1. 在 html 标签样式或 css 中使用。font-family: monospace;
2. 在注入 html 标签之前，通过\n替换为来准备字符串。<br/>

例子：const htmlStr = myStr.replace(/\n/g,'<br/>')