Question

我想转换textarea字段中的所有+符号，用户键入并解析该+符号及其后面的文本，直到换行符转换为HTML input checkbox。例如，如果用户在textarea中输入：

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

我想将其解析为：

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

我需要将string作为HTML返回。

我创建了一个名为function的{{1}}，其中包含listNote(note) note中的文字。我应该怎么写这个？

Answer 1

您可以在下面的代码中找到一个想法：

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

Answer 2

以下是您需要做的事情：

将textarea内容拆分为单独的注释，要么拆分+（但你需要忽略数组的第一项）或换行（但是你不能有多行注释）< / LI>
删除前导+ （一个简单的子字符串就足够了）
添加标记打开和关闭（字符串连接）

希望它能让你开始！

Answer 3

尝试使用简单的split和ArrayMap

＆＃13;

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

＆＃13;

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

＆＃13;

将textarea中的“+”更改为<input type =“checkbox”/>

3 个答案: