NarulaKeshav NarulaKeshav - 21 days ago 5
jQuery Question

Changing "+" in textarea to <input type='checkbox'>

I want to convert all the

+
sign in the textarea field where the user types and parse that
+
sign and the text after it until the newline character into an HTML
input checkbox
.
For example, if the user, in the
textarea
, types:

+ Feed the kittens
+ Call the doctor
+ Go buy grocery


I want to parse it to something like:

<input type="checkbox"><label>Feed the kittens</label>
<input type="checkbox"><label>Call the doctor</label>
<input type="checkbox"><label>Go buy grocery</label>


I need to return this as a
string
with the
HTML
in it.

I created a
function
called
listNote(note)
that takes in
note
which is the text in the
textarea
. How should I go about writing this?

Answer

you may refer below code for an idea:

$(document).ready(function() {
  $("#parseButton").click(function() {
    var str = $("#mytext").val(); //get the text entered by user

    var allLabels = str.split("+"); //split the text assuming that user will be writing data in required fashion

    allLabels.shift(); //skip the 0th index of array which will be blank

    var htmlString = "";
    //iterate over all the tasks one by one to form html string
    $.each(allLabels, function(index, value) {

      htmlString += '<input type="checkbox"><label>' + value + '</label>';
    });

    //append the html to div
    $("#myHtml").html(htmlString);

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="mytext" rows="4" cols="50">
  + Feed the kittens 
  + Call the doctor 
  + Go buy grocery</textarea>
<button id="parseButton">Parse</button>

</br>
</br>
Output:
<div id="myHtml"></div>