如何將所有文本包裝成唯一的span標記？

Question

我想將所有正文（每個單詞）包裝成唯一的span標簽。

換行前 ：

<body>    
<div>
  <p>word word </p>
  <div>word word</div>
    <ul>
        <li>word word</li>
    </ul>
  </ul>
  <p>word word <strong>word</strong> </p>
</div>
</body>

包裹后 ：

<body>
<div>
    <p><span id="1">word</span> <span id="2">word</span> </p>
    <div><span id="3">word</span> <span id="4">word</span></div>
    <ul>
        <li><span id="5">word</span> <span id="6">word</span></li>
    </ul>
    </ul>
    <p><span id="7">word</span> <span id="8">word</span> <strong><span id="9">word</span></strong> </p>
</div>
</body>

我在jquery中嘗試了這個，但它沒有給出我期望的結果

$('body *').each(function(){

        var words = $(this).text().split(" ");

            $(this).empty();
            $t=$(this);
            $.each(words, function(i, v) {
                $t.append('<span>'+v+'</span>');
            });

});

洛根，提前謝謝

Answer 1

(function (count) {
  'use strict';
  (function wrap(el) {
    $(el).contents().each(function () {
      // Node.* won't work in IE < 9, use `1`
      if (this.nodeType === Node.ELEMENT_NODE) {
        wrap(this);
      // and `3` respectively
      } else if (this.nodeType === Node.TEXT_NODE) {
        var val = $.trim(this.nodeValue);
        if (val.length > 0) {
          $(this).replaceWith($.map(val.split(/\s+/), function (w) {
            return $('<span>', {id: count = count + 1, text: w}).get();
          }));
        }
      }
    });
  }('body'));
}(0));

http://jsfiddle.net/LNLvg/3/

更新：此版本不會以靜默方式終止whitspace;）

(function (count) {
  'use strict';
  (function wrap(el) {
    $(el).filter(':not(script)').contents().each(function () {
      if (this.nodeType === Node.ELEMENT_NODE) {
        wrap(this);
      } else if (this.nodeType === Node.TEXT_NODE && !this.nodeValue.match(/^\s+$/m)) {
        $(this).replaceWith($.map(this.nodeValue.split(/(\S+)/), function (w) {
          return w.match(/^\s*$/) ? document.createTextNode(w) : $('<span>', {id: count = count + 1, text: w}).get();
        }));
      }
    });
  }('body'));
}(0));

http://jsfiddle.net/mtmqR/1/

Answer 2

這是一個使用普通javascript的解決方案，它包含跨度中的單詞並保留文本中的空格，但將它們留在跨度之外，因此只有單詞本身在跨度中：

function splitWords(top) {
    var node = top.firstChild, words, newNode, idCntr = 1, skipChild;
    var re = /\S/;
    while(node && node != top) {
        skipChild = false;
        // if text node, check for our text
        if (node.nodeType == 3) {
            if (re.test(node.nodeValue)) {
                newNode = null;
                words = node.nodeValue.split(" ");
                for (var i = 0; i < words.length; i++) {
                    if (words[i] === "") {
                        newNode = document.createTextNode(" ");
                        node.parentNode.insertBefore(newNode, node);
                    } else {
                        newNode = document.createElement("span");
                        newNode.id = "word" + idCntr++;
                        newNode.innerHTML = words[i];
                        node.parentNode.insertBefore(newNode, node);
                        if (i < words.length - 1) {
                            newNode = document.createTextNode(" ");
                            node.parentNode.insertBefore(newNode, node);
                        }
                    }
                }
                if (newNode) {
                    node.parentNode.removeChild(node);
                    node = newNode;
                    // don't go into the children of this node
                    skipChild = true;
                }
            }
        } else if (node.nodeType == 1) {
            if (node.tagName == "SCRIPT") {
                skipChild = true;
            }
        }        

        if (!skipChild && node.firstChild) {
            // if it has a child node, traverse down into children
            node = node.firstChild;
        } else if (node.nextSibling) {
            // if it has a sibling, go to the next sibling
            node = node.nextSibling;
        } else {
            // go up the parent chain until we find a parent that has a nextSibling
            // so we can keep going
            while ((node = node.parentNode) != top) {
                if (node.nextSibling) {
                    node = node.nextSibling;
                    break;
                }
            }
        }
    }
}

一個工作演示： http ： //jsfiddle.net/jfriend00/3mms7/

僅供參考，我將id值設為“word1”，“word2”等...因為在HTML5之前，id值不允許以數字開頭。

如何將所有文本包裝成唯一的span標記？

問題描述

2 個解決方案

解決方案1
10 已采納 2012-08-24 08:07:31

解決方案2
1 2012-08-24 08:52:19

如何將所有文本包裝成唯一的span標記？

問題描述

2 個解決方案

解決方案1 10 已采納 2012-08-24 08:07:31

解決方案2 1 2012-08-24 08:52:19

解決方案1
10 已采納 2012-08-24 08:07:31

解決方案2
1 2012-08-24 08:52:19