如何將每個字母包裝在一個跨度中並保持正常的分詞和子元素

Question

我想將 HTML 元素內的每個字母包裝到它自己的跨度中（用於 animation 目的）。

這可以通過將文本拆分為字符並創建多個跨度來實現（請參閱jQuery - 如何將字符串中的每個字符包裝在跨度中）。

只有這樣，文字換行將不再起作用，因為單詞/字母被分解為跨度。 子元素（如強）也被刪除。

例子：

 $.fn.convertToSeperateLetters = function() { return this.each(function() { var html = $(this).text().replace(/\S/g, '<span class="letter">$&</span>'); return $(this).html(html) }); } $('p').convertToSeperateLetters();

 p, .word, .letter { padding: 3px 1px; } p { border: 1px solid red; }.word { display: inline-block; border: 1px solid green; margin-left: 2px; margin-right: 2px; }.letter { display: inline-block; border: 1px solid blue; }.word-wrapped { width: 360px; background: lightgrey; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Hello World</p> <p>Hello <strong>World</strong></p> <div class="word-wrapped"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div>

Answer 1

我制定了一個解決方案，該解決方案還將每個單詞包裝成一個跨度。 這種換行方式仍然適用於整個單詞。

最終結果中還保留了（1 級）子元素。 例如：

a <strong>bc</strong> d

轉換為：

<span class="word">
  <span class="letter">a</span>
</span>
<span class="word">
  <span class="letter">
    <strong>b</strong>
  </span>
  <span class="letter">
    <strong>c</strong>
  </span>
</span>
<span class="word">
  <span class="letter">d</span>
</span>

已知的問題：

• 只有一級子元素有效（所以<p>Hello <strong><u>W</u>orld</strong></p>不會）
• 針對另一個元素的文本創建兩個單獨的單詞（所以<p>User<strong>name</strong></p>是兩個單詞）

完整的解決方案：

 $.fn.convertToSeperateLetters = function() { return this.each(function() { var $el = $(this); var elements = convertToSeperateLetters($el, false); $el.empty().append(elements); return $el; }); } $('p').convertToSeperateLetters(); function convertToSeperateLetters($element, asSubNode) { var elements = []; var childNodes = $element.contents(); // Loop through all child nodes of selected element for (var c = 0; c < childNodes.length; c++) { var node = childNodes[c]; var type = node.nodeType; // Process a child element if (type == Node.ELEMENT_NODE) { Array.prototype.push.apply(elements, convertToSeperateLetters($(node), true)); } // Process a piece of text else if (type == Node.TEXT_NODE) { var text = node.nodeValue; // Process each word var words = text.split(' '); for (var w = 0; w < words.length; w++) { var word = words[w]; // Skip empty words if (word == '') continue; // Wrap each word into span var $word = $('<span/>').addClass('word'); for (var l = 0; l < word.length; l++) { var letter = word[l]; // Wrap each letter into span var $letter = $('<span/>').addClass('letter'); if (.asSubNode) { $letter;html(letter). } if (asSubNode) { var $subNode = $element.clone().empty();html(letter). $letter;append($subNode). } $word;append($letter). } elements;push($word); } } } return elements; }

 p, .word, .letter { padding: 3px 1px; } p { border: 1px solid red; }.word { display: inline-block; border: 1px solid green; margin-left: 2px; margin-right: 2px; }.letter { display: inline-block; border: 1px solid blue; }.word-wrapped { width: 360px; background: lightgrey; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Hello World</p> <p>Hello <strong>World</strong></p> <div class="word-wrapped"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div>