jquery - Replace Paragraph Tags from Paragraphs With Only Single Floated Image with 该图像

Question

我正在尝试补偿我的所见即所得，当不属于其他内容的段落时，它会用段落标记围绕单个图像。这打破了我的花车。我想删除包含仅 单个 图像的段落标记，并且仅当图像在 img 标记中具有内联 css float 属性时。我看过示例，但它们似乎并没有专门针对该示例，并且会破坏我的其余内容。

我正在使用 Modx，但 jQuery 可能比在 php 中创建自定义输出修饰符更容易(我运行 v3)。

所以:

<p><img src="uploads/image.jpg" style="float: right; width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="Description" width="235" height="225" class="d-none d-md-block"></p>

变成:

<img src="uploads/image.jpg" style="float: right; width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="Description" width="235" height="225" class="d-none d-md-block">

Answer 1

这将是一个快速而简单的尝试，使用简单的 vanilla Javascript:

[...document.querySelectorAll('p')] // get all <p> as an array using spread syntax
  .filter(p => // so we can use array filter function on the list 
    p.children.length === 1 // only those that have exactly one child element
    && // AND
    p.firstElementChild.tagName === 'IMG' // which must be an <img>
    && // AND
    p.firstElementChild.style.float // and needs to have an inline float
  )
  .forEach(p => p.replaceWith(p.firstElementChild)) // and replace each p with its only child

p {
  border: 10px solid red;
}

<p>
  <img src="uploads/image.jpg" style="float: right; width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="Description" width="235" height="225" class="d-none d-md-block">
</p>

<br />

<p>
  <img src="uploads/image.jpg" style="float: right; width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="Description" width="235" height="225" class="d-none d-md-block">
  <span>More than only the img</span>
</p>

<br />

<p>
  <img src="uploads/image.jpg" style="width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="image not floating" width="235" height="225" class="d-none d-md-block">
</p>

<br />

<p><b>No img inside p</b></p>