javascript - 将每个字符包装在 中

Question

我试图将给定元素中的每个字符包装在 <i></i> 中标签。到目前为止，我已经尝试了两种方法，但每种方法都有一些问题。

第一种方法:

我替换了 .html() 的每个字符我的元素被包裹版本。问题是它也将标签视为字符并将它们也包装起来。

$(function() {
  $(document).click(function(e) {
    var element = e.target;
    if ($(element).text() != '') { //Contains text
      var txt = $(element).contents().filter(function() {
        return this.nodeType === 3;
      }).text();
      if (txt != '') { //Text outside span
        var chars = $(element).html().split('');
        var newChars = '';
        $.each(chars, function(i, el) {
          newChars += "<i>" + el + "</i>";
        });
        $(element).html(newChars);
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  Lorem <span>teeest</span> ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aspernatur ducimus autem eveniet porro vitae ratione illum totam voluptatem alias. Impedit deserunt maiores excepturi ab repellendus atque aperiam quisquam iste! Lorem
  ipsum dolor sit amet, consectetur adipisicing elit. Saepe quasi mollitia perspiciatis explicabo, maxime quae</p>

第二种方法:

我尝试了一种递归方法，遍历我元素的子元素并替换每个子元素中的文本。问题是，我的输出文本以某种方式加倍，结果中的子项放错了位置。

function recursiveReplace(element) {
  if ($(element).children().length > 0) {
    $(element).children().each(function() {
      recursiveReplace($(this)[0]);
    });
  }
  var chars = $(element).contents().filter(function() {
    return this.nodeType === 3;
  }).text().split('');
  var newChars = '';
  $.each(chars, function(i, el) {
    newChars += "<i>" + el + "</i>";
  });
  console.log(newChars);
  $(element).contents().filter(function() {
    return this.nodeType === 3;
  }).replaceWith(newChars);

}

$(function() {
  $(document).click(function(e) {
    var element = e.target;
    if ($(element).text() != '') { //Contains text
      var txt = $(element).contents().filter(function() {
        return this.nodeType === 3;
      }).text();
      if (txt != '') { //Text outside span
        recursiveReplace(element);
      }
    }
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Lorem <span>teeest</span> ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aspernatur ducimus autem eveniet porro vitae ratione illum totam voluptatem alias. Impedit deserunt maiores excepturi ab repellendus atque aperiam quisquam iste! Lorem
  ipsum dolor sit amet, consectetur adipisicing elit. Saepe quasi mollitia perspiciatis expli</p>

你们中的任何人都知道我如何实现这一目标吗？

Answer 1

如果您单独处理每个文本节点而不是按照您的方式连接它(作为在过滤集合上运行 text() 的结果)，您的递归方法应该有效

function recursiveReplace(element){
  $(element).children().each(function() {
    recursiveReplace(this);
  });

  $(element).contents()
    .filter(function(){ return this.nodeType === 3; })
    .each(function(){
      var wrapped = '<i>' + this.textContent.split('').join('</i><i>') + '</i>';
      console.log(wrapped);
      $(this).replaceWith(wrapped);
    });
}

请注意我还如何简化您的递归调用，在使用 each() 时无需检查是否有任何子级，并且包装 this 只是为了立即打开它。