JQuery 为每个新文本节点添加一个空格以防止提取时出现结块

Question

我做的是

我要变身

<div id=master>
Blah
  <span id=crap>Blah1</span>
  <div id=crap2>Blah2</div>
  <b>Blah3</b>
</div>

到

<div id=master>
Blah
  <span id=crap> Blah1 </span>
  <div id=crap2> Blah2 </div>
  <b> Blah3 </b>
</div>

因为当我从 master 中的所有元素中提取所有文本时，它看起来像这样

BlahBlah1Blah2Blah3

我希望它是

Blah Blah1 Blah2 Blah3

编辑： 在 HTML 中，如果这些空格无论如何都被删除，仍然可以用

等符号替换它们

<div id=master>
Blah
  <span id=crap>§Blah1§</span>
  <div id=crap2>§Blah2§</div>
  <b>§Blah3§</b>
</div>

Answer 1

您可以将单词放入一个数组中并连接它：

['Blah', 'Blah1', 'Blah2', 'Blah3'].join(' ');

这样你就不必弄乱 dom

Answer 2

尝试使用从元素函数获取文本的递归函数：

window.getText = function(dom) {
$(dom)
  .contents()
  .filter(function() {
    return this.nodeType == 3 ? " " + this + " " : ""; //Node.TEXT_NODE
  });
}

window.forAllKids = function(dom, array) {
    if (dom.children.length == 0)
    {
        return array.push(getText(dom))
    }
    else
    {
        $(dom.children).each(function(){
            forAllKids($(this),array);
        })
    }
}

Answer 3

简单：

$("div#master *").each(function(){
    var me = $(this);
    me.html(" " + me.html() + " "); // Even I think single space should be enougth for your goal...
});

Answer 4

找到了一个非常快速且有效的修复程序

$("div#master").html($("div#master").html().replace(/>[\s\n]*</g, "> <"));
console.log($("div#master").html());

https://regex101.com/r/oF5sR9/1
http://jsfiddle.net/kqgf67sa/3/

JQuery 为每个新文本节点添加一个空格以防止提取时出现结块

JQuery add a whitespace to each new text node to prevent clumping on extraction

jquery

whitespace

text