JavaScript 在所选文本上添加 前缀答案

【问题标题】：JavaScript to prefix on selected textJavaScript 在所选文本上添加 前缀
【发布时间】：2020-08-11 03:57:23
【问题描述】：

我有一个textarea 字段，用户在其中输入信息，然后将这些信息存储在用于 POST API 请求的 JS 变量中，但是由于在呈现为 HTML 时没有换行符，所有文本都在一个行。

如何在 JavaScript 中使用 HTML   标记为影响、采取的措施和后续步骤添加前缀？

当前输出：

Affecting: Lorem IpsumActions Taken: Lorem IpsumNext Steps:

期望的输出：

<br>Affecting:
<br>Actions Taken:
<br>Next Steps:

TIA

【问题讨论】：

你可能想看看stackoverflow.com/questions/498461/…。
您是否每次都接受输入并将其连接起来？如果是这样，只需将中断标记添加到该
所以基本上我有一个变量用作我的 POST 请求的一部分。我需要该变量在上述标题上加上 BR 标记
与其尝试将 3 个输入连接到一个 textarea - 并遇到这个问题 - 我强烈建议您将输入拆分为 3 个单独的输入/textarea，然后将每个文本输入/texarea 的值将作为单独的参数传递给您的 POST 查询并解决问题。
@gavgrif 不幸的是我不能这样做，否则是的，这将是最好的选择。实际上，我需要连接许多标题，但这只是一个小示例

标签： javascript html

【解决方案1】：

在我看来你想要这样的东西：

console.log(document.getElementById('txt').value.replace(/\n/g, '&lt;br&gt;'))

<textarea id="txt" rows="3" cols="30">Affecting: Lorem Ipsum
Actions Taken: Lorem Ipsum
Next Steps:</textarea>

在您的 textarea-value 中返回的文本包含 \n 字符以标记行尾。在大多数 HTML 元素中，这些标记被忽略。您可以使它们在 <pre> 元素中可见，甚至在“正常”<divs>s 或 s 中可见，如果您使用 white-space:pre 格式化它们，请参阅此处 white-space。

在上面的 sn-p 中，我只是将每个 \n 替换为  。

【讨论】：

【解决方案2】：

标签将显示为标签的文本，而不是在文本区域中呈现，您需要换行符。

const val = 'Affecting: Lorem IpsumActions Taken: Lorem IpsumNext Steps:'.replace(/: /g, ': \n');
document.getElementById('txt').value = val;

&lt;textarea id="txt"&gt;&lt;/textarea&gt;

【讨论】：

这导致狗渲染 - Lorem IpsumActions Taken: