2016-11-18 4 views
0

Ich möchte alle + Zeichen im Feld textarea konvertieren, wo der Benutzer das + Zeichen und den Text danach bis zum Zeilenumbruchzeichen eingibt und analysiert HTML input checkbox. Zum Beispiel, wenn der Benutzer in den textarea, Typen:Ändern von "+" in textarea zu <input type = 'checkbox'>

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

ich es etwas analysieren will wie:

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

muß ich dies als string mit den HTML in ihm zurückzukehren .

Ich erstellte eine function namens listNote(note), die note übernimmt, die der Text in textarea ist. Wie soll ich das schreiben?

+0

, wie Sie auf die Verhinderung Benutzer planen aus der Addition mehrere '+' auf jeder Zeile? Haben Sie die Möglichkeit, eine alternative Lösung als ein 'textarea' zu verwenden, damit der Benutzer seine Daten eingeben kann? – haxxxton

Antwort

1

Sie unter Code für eine Idee beziehen:

$(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>

0

Hier ist, was Sie tun müssen:

  • spaltete die textarea Inhalt in getrennte Noten, entweder Splitting über + (aber Sie müssen das erste Element des Arrays ignorieren) oder Zeilenvorschub (aber dann können Sie‘ haben t Multilinien Noten)
  • entfernen der führenden (eine einfache Teilkette genügt)
  • den Tag Öffnung hinzuzufügen und Schließen (String-Verkettung)

Hoffe es fängt an!

0

Versuchen mit einfachen split und ArrayMap

function change(){ 
 
    var final=""; 
 
var res =$('textarea').val().split("+"); 
 
    res.map(function(a){ 
 
    if(a != ""){ 
 
    final += '<input type="checkbox"><label>'+a+'</label>'; 
 
    } 
 
    }) 
 
    console.log(final) 
 

 
$('body').append(final) 
 
    
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea cols="20" rows="4" >+ Feed the kittens 
 
+ Call the doctor 
 
+ Go buy grocery </textarea> 
 
<button onclick="change()">click</button>

Verwandte Themen