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

Question

我有 contenteditable div 作为文本编辑器

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

例如

Case 1

如果用户写了以下内容

测试 1(按下回车键)

测试2(按下回车键)

测试 3(按下回车键)

那么Test1,Test2,Test3应该有3个复选框

和

Case2

当用户写入时

Parent1(按下回车键)

• 测试 1(按下回车键)

• 测试2(按下回车键)

• 测试 3(按下回车键)

在上面的例子中会有 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 Demo

基本上，新的 span、div、br 标签或 li 标签应该创建到复选框中。

如果有任何不同的方法可以满足创建复选框的要求/基本要求，我们非常欢迎。

Answer 1

这是一个可能的解决方案。我遍历了最里面的文本元素，然后将其转换为复选框。

$('#checkbox').click(function() {
     var $p = "";  
     $p = $('.outputBox');
     wrapText($p);
});

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

这是 fiddle : http://jsfiddle.net/wLrfqvss/6/

希望这就是您要找的。

如果您只希望某些元素发生这种情况，您总是可以像这样添加一个检查:

if (this.nodeType === 1 && this.tagName === 'DIV')

在上面的代码中。