将段落或新元素转换为复选框

Question

我contenteditable div作为文本编辑器

所需的功能是用户在文本编辑器中写入或复制/粘贴的任何内容都会变成复选框

例如

情况1

如果用户写下以下内容

Test1(输入按键)

Test2(输入按键)

Test3(输入键按下)

那么Test1,Test2,Test3应分别有三个复选框

和

案例2

当用户写的时候

Parent1(按下输入键)

• Test1(输入按键)

• Test2(输入按键)

• Test3(输入键按下)

在上面的例子中,将有4个复选框parent1和3个li's

我已经取得的成就,但如果更准确,我愿意接受新的方式.

$('#checkbox').click(function() {
var $p = "";  
     var re = /\S/;
     $p = $('.outputBox');
      $p.contents()
      .filter(function() {    
        return this.nodeType == 3&& re.test(this.nodeValue);;  
     })
    .wrap('<label> <input type="checkbox" name="field_1" value="on" />')
});

FIDDLE演示

基本上一个新的span,div,br标签或者就此而言应该创建复选框.

如果有任何不同的方法可以满足创建复选框的要求/基本要求,那么非常受欢迎.

Answer 1

几乎每个人都给出了第一种情况的答案，但我找到了第二种情况的答案，我在 带有复选框的显示内容的点击事件中添加了这两行

我想@arthi sreekumar 也让我对此li's表示支持。checkbox

 $('.outputBox').find("ol").find("li").wrapInner(('<label style="display:block;"> <input type="checkbox" class="liolChk" name="field_1" value="on" />')); 
 $('.outputBox').find("ul").find("li").wrapInner(('<label style="display:block;"> <input type="checkbox" class="liolChk" name="field_1" value="on" />')); 

小提琴演示