如何在没有html标签的情况下查找文本并使用apblement进行包装

Question

我有以下HTML代码.我想找到并替换没有HTML标签的文本,并p使用jQuery 将其包装在元素中.有没有办法达到我的目标？

<div class="col span_12_of_12 firstDiv">
  <h2>My tasks</h2>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  <ul>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
  </ul>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>

Answer 1

要实现此目的,您需要找到子textNodes并将它们包装在<p>标记中.要做到这一点你可以使用contents(),filter()然后wrap()像这样:

$('.col').contents().filter(function() {
  return this.nodeType == 3 && this.textContent.trim();
}).wrap('<p />');

p { border: 1px solid #C00; } /* only used to make the output obvious */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col span_12_of_12 firstDiv">
  <h2>My tasks</h2>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  <ul>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
  </ul>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>