使用jQuery：如何将每个字母包装在标签中？

Question

我已经花了两天时间，所以如果有简单的答案，我会感到灰心。我试图在div中的每个字母周围放置一个span标签，同时保留其余标签不变。

<div id="div"> 
    <p> 
     Of course some of the <strong>text is in other tags</strong> and <strong>some 
     is in <em>nested tags</em>, etc.</strong> 
    </p> 
</div> 

我变得非常接近，但最终总是让我失望。

Answer 1

我明白了！这可能不是最佳的解决方案，但它的工作原理！还要注意，由于额外的标签，空白可能会混乱。这也包装标签，但也很容易解决。

function wrap(target) { 
    var newtarget = $("<div></div>"); 
    nodes = target.contents().clone(); // the clone is critical! 
    nodes.each(function() { 
     if (this.nodeType == 3) { // text 
      var newhtml = ""; 
      var text = this.wholeText; // maybe "textContent" is better? 
      for (var i=0; i < text.length; i++) { 
       if (text[i] == ' ') newhtml += " "; 
       else newhtml += "<span>" + text[i] + "</span>"; 
      } 
      newtarget.append($(newhtml)); 
     } 
     else { // recursion FTW! 
      $(this).html(wrap($(this))); 
      newtarget.append($(this)); 
     } 
    }); 
    return newtarget.html(); 
} 

用法：

$("#div").html(wrap($("#div"))); 

Answer 2

function init(target) { 
var newtarget = $('<div></div>'); 
nodes = target.contents().clone(); // the clone is critical! 
nodes.each(function(i,v) { 
    if (v.nodeType == 3) { // text 
     if($.trim($(this).text()).length>0){ 
      var letters=$(this).text().split(''); 
      for (var j = 0; j < letters.length; j++) { 
       newtarget.append('<span class="letter">'+letters[j]+'</span>') 
      } 
     } 
    } 
    else { // recursion FTW! 
     newtarget.append($(this)); 
     $(this).html(init($(this))); 
    } 
}); 
return newtarget.html(); 
} 

这工作得相当好。然而，也就是（无论如何7），将所有的空间去掉。另外，我应该从函数结尾处的dom中移除newtarget吗？克隆怎么样？应该删除？

Answer 3

您可能想看看我的插件TextGrad，它允许使用jQuery对象中添加的“spanize”方法完成该操作。

http://github.com/subtenante/TextGrad

编辑：

我忘了我有一个演示存在（！）：

http://www.si-les-idees-suffisaient.net/jquery/textgrad.html