javascript - 如何找到没有 html 标签的文本并用 p 元素包装它

Question

我有以下 HTML 代码。我想查找并替换没有 HTML 标记的文本，并使用 jQuery 将其包装在 p 元素中。有没有办法实现我的目标？

<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

为此，您需要找到子文本节点并将它们包装在 <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>