Question

我知道这个问题已被提出，但几乎所有的答案都使用了jQuery的wrap函数。我试图找出一种简单的javascript方式：

<div id="content">
    "hey"
    <br>
    <br>
    "foo"
    "bar"
</div>
<script>
    function mainFocusOut(e) {
        //here or any other focus outs...create a function to look between <br> tags and put everything into divs
        if (e == 'undefined') e = window.event;
        var target = e.target || e.srcElement;
        for (var i = 0; i < target.childNodes.length; i++) {
            //I'm not sure if I need a closure function here inside the loop so it works on each individual textNode
            (function(i) {
                var curNode = target.childNodes[i];
                if (curNode.nodeName === "#text") {
                    var element = document.createElement("div");
                    element.appendChild(curNode);
                    target.insertBefore(element, curNode);
                    //NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
                }
            })(i);
        }
    }
</script>

当然，所需的输出是div标签之间的所有文本节点，相同的位置。我究竟做错了什么？它就像我在这里一样简单，只是一个简单的循环吗？

Answer 1

在我看来，你需要做的就是转换这两行：

element.appendChild(curNode);
target.insertBefore(element, curNode);

所以它变成了：

target.insertBefore(element, curNode);
element.appendChild(curNode);

因为现在，在将div放在正确位置之前，将curNode附加到新div。这导致：

<div>"hey"</div>

这一切都很棒，但是为了将div放在正确的位置，你不能再把它放在"hey"之前，因为你只是把它放在div里面。

通过交换两行，首先将div放在"hey"前面：

<div></div>"hey"

然后你的位置＆＃34;嘿＆＃34;正确地在div中：

<div>"hey"</div>

我希望这有帮助！

Answer 2

以下是依赖于字符串对象方法split和indexOf

的解决方案

<script>
function enclose(id, cutString){
  out = '';
  target = document.getElementById(id);
  text = target.innerHTML;
  if (text.indexOf(cutString) == -1){
    return true;
  }
  parts = text.split(cutString);
  for (i = 0; i < parts.length; i++){
     out += '<div class="new-div">'+parts[i]+'</div>';
  }
  target.innerHTML = out;
}
</script>

结帐DEMO

更新

以下演示是一个更新，通过match(/\w/gi)循环使用for条件检查忽略空白部分。结帐here。

Javascript将所有文本节点包装在标签中

2 个答案:

更新