Simple formatting in textarea

Question

I am trying to make a blog type of website. I got to a point where you can enter text into a textarea box and then click submit to have it appear below. However, I have come to a problem where it does not save the format of the input (notably for me, transforms paragraphs into spaces). I have read that this would require a rich-text editor, and I have tried TinyMCE but it gives a lot more options than needed or which would be able to be used in my case. Is there a simple way to fix this problem? If not, what is the best way to go about this?
I am mainly after the paragraph, tab, and multiple spaces formatting, everything else is currently not needed.
Here is what I currently have that is related:
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";
        }
    }
}

EDIT: white-space: pre-wrap; fixed it, thank you

Just use `white-space: pre-wrap` CSS to preserve whitespace. — Niet the Dark Absol, Jun 26 '20 at 22:12
textareas don't contain textNodes. you have to use `.value` to set or get text and not `.appendChild`. also.. you don't need to scream at document.createElement.. it's not deaf. — GottZ, Jun 26 '20 at 22:28

score 0 · Answer 1 · answered Jun 26 '20 at 22:28

If you want something simple, just save into your database the input content with id description, after that it will respect the paragraph and spaces.

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>

score 0 · Answer 2 · edited Jun 26 '20 at 23:29

0

You can create a function nl2br() as folows:

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');
}

You can see more here

edited Jun 26 '20 at 23:29

David Buck

3,752
35
31
35

answered Jun 26 '20 at 22:29

GersonSalvador

12
4

Simple formatting in textarea

2 Answers2