javascript - 使用 jQuery 包装未包装的 textNode

Question

我有一个这样的 HTML 结构:

<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor</a> incididunt ut labore et dolore magna aliqua.</div>

我需要获取包裹在 <p> 中的 div 中的文本标签。我正在使用下面的代码:

$('.col-md-6').contents().filter(function() {
    return this.nodeType === 3;
}).each(function() {
    this.nodeValue = $.trim(this.nodeValue);
}).wrap('<p></p>');

如果文本中没有链接(<a>)，效果很好。我的 jQuery 代码的输出将是:

<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </p><a href="#">tempor</a><p> incididunt ut labore et dolore magna aliqua.</p></div>

这是我想要的结果:

<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor</a> incididunt ut labore et dolore magna aliqua.</p></div>

这可能吗？

Answer 1

使用 html() 和 contents()

$('.col-md-6').html(function() {
  return $('<p/>').html($(this).contents())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor</a> incididunt ut labore et dolore magna aliqua.</div>

对于多个 .col-md-6 和 textNode

$('.col-md-6').each(function() {
  $(this).contents().filter(function() {
    return this.nodeType === 3;
  }).siblings().addBack().wrapAll('<p></p>')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor</a> incididunt ut labore et dolore magna aliqua.</div>

<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor</a> incididunt ut labore et dolore magna aliqua.</p></div>

<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor</a> incididunt ut labore et dolore magna aliqua.</div>