文本区域中的简单格式答案

【问题标题】：Simple formatting in textarea文本区域中的简单格式
【发布时间】：2020-10-17 13:40:49
【问题描述】：

我正在尝试制作博客类型的网站。我已经到了可以在文本区域框中输入文本然后单击提交以使其出现在下方的地步。但是，我遇到了一个问题，它不保存输入的格式（特别是对我来说，将段落转换为空格）。我已经读过这需要一个富文本编辑器，并且我已经尝试过 TinyMCE，但它提供了比需要更多的选项，或者可以在我的情况下使用。有没有简单的方法来解决这个问题？如果没有，最好的方法是什么？
我主要是在段落、制表符和多个空格格式化之后，其他的目前都不需要。
这是我目前拥有的相关内容：
HTML

<!-- Blog Section -->
        <div class="itemBlog">
            <h2 id="itemBlogTitle">My Blog</h2>
            <textarea type="text" rows="10" cols="100" class="blogTextArea" id="blogInput"></textarea>
            <div onclick="newBlog()" class="addBtn">Add</div>
            <ul id="blogList"></ul>
        </div>
        <script src="itemblog.js"></script>

JavaScript

// Create a new blog item when clicking on the "Add" button
function newBlog() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("blogInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue != '') {
        document.getElementById("blogList").appendChild(li);
    }
    document.getElementById("blogInput").value = "";

    var textarea = document.createElement("TEXTAREA");
    var txt = document.createTextNode("\u00D7");
    textarea.className = "close";
    textarea.appendChild(txt);
    li.appendChild(textarea);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function () {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

编辑：空白：预包装；解决了，谢谢

【问题讨论】：

只需使用white-space: pre-wrap CSS 来保留空格。
文本区域不包含文本节点。您必须使用.value 来设置或获取文本，而不是.appendChild。还有..你不需要对 document.createElement 大喊大叫。它不是聋子。

标签： javascript html

【解决方案1】：

如果你想要一些简单的东西，只需将 ID 为 description 的输入内容保存到数据库中，然后它将尊重段落和空格。

JQUERY

$('#test').keyup(function() {
  var text = $(this).val();
  var description = text.replace(/ /g, '&nbsp;').replace(/[\n]/g, '<br>');
  $('#text').html(description)
  $('#description').val(description)
});

<textarea  id="test" cols="30" rows="10"></textarea>
<input id="description" name="description" hidden>
<div id="text"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

js

function formatString(el) {
  var str = el.value;
  str = str.replace(/ /g, '&nbsp;').replace(/[\n]/g, '<br>');
  
  document.getElementById('text').innerHTML = str;
  document.getElementById('description').value = str;
  
}

<textarea onkeyup="formatString(this)" cols="30" rows="10"></textarea>
<input id="description" name="description" hidden>
<div id="text"></div>

【讨论】：

【解决方案2】：

您可以创建一个函数nl2br()，如下所示：

function nl2br (str, is_xhtml) {
    if (typeof str === 'undefined' || str === null) {
        return '';
    }
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

你可以看到更多here

【讨论】：