使用jQuery面临“html”清理挑战

Facing `html` cleaning challenge using jQuery

本文关键字：挑战 html jQuery 面临 使用      更新时间：2023-09-26

我从后端获取dusty html。（后端将.doc转换为 HTML）我想清除标签。我使用了每个迭代器，但我没有得到期望的输出。

1）我无法在单词之间放置space（span之间有空格）

2）我不知道将内容包装在单个strong元素中，以防万一

这是我的 HTML ：

<p style="margin-right:0pt;margin-left:47.55pt;margin-bottom:0pt;line-height:normal;font-size:11pt;"> 
  <strong>
    <span style="font-family:Arial;">OUT</span>
  </strong>
  <strong>
   <span style="font-family:Arial;letter-spacing:0.05pt;">D</span>
 </strong>
 <strong>
   <span style="font-family:Arial;">OOR</span>
 </strong>
 <strong>
   <span style="font-family:Arial;letter-spacing:-0.5pt;"> </span>
 </strong>
 <strong>
   <span style="font-family:Arial;">COOLING</span>
 </strong>
 <strong>
   <span style="font-family:Arial;letter-spacing:-0.45pt;"> </span>
 </strong>
 <strong>
   <span style="font-family:Arial;">OF</span>
 </strong>
 <strong>
  <span style="font-family:Arial;letter-spacing:-0.15pt;"> </span>
</strong>
<strong>
  <span style="font-family:Arial;">AL</span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:-0.15pt;"> </span>
</strong>
<strong>
  <span style="font-family:Arial;">GH</span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:0.05pt;">A</span>
</strong>
<strong>
  <span style="font-family:Arial;">RAFFA</span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:-0.6pt;"> </span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:0.05pt;">SP</span>
</strong>
<strong>
  <span style="font-family:Arial;">ORTS</span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:-0.4pt;"> </span>
</strong>
<strong>
  <span style="font-family:Arial;">CL</span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:0.05pt;">U</span>
</strong>
<strong>
  <span style="font-family:Arial;">B</span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:-0.3pt;"> </span>
</strong>
<strong>
  <span style="font-family:Arial;">FOR</span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:-0.2pt;"> </span>
</strong>
<strong>
  <span style="font-family:Arial;">AS</span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:0.05pt;">P</span>
</strong>
<strong>
  <span style="font-family:Arial;">IRE</span>
</strong>
<strong>
  <span style="font-family:Arial;letter-spacing:-0.4pt;"> </span>
</strong>
<strong>
  <span style="font-family:Arial;">ZONE</span>
</strong> 
</p>

我的尝试 ：

$('p').children('strong').find('span').each(function () {
    $(this).contents().unwrap();
});

注意：我每页都没有paragraphs。

现场演示

更新：

几乎我期待这个输出：

<p style="font-family:Arial;letter-spacing:0.05pt;"><strong>OUTDOOR COOLING OF AL GHARAFFA SPORTS CLUB FOR ASPIRE ZONE</strong></p>

您可以使用所有跨度的 .text（） 非常轻松地获得它：

$("span").text()

会给你

OUTDOOR COOLING OF AL GHARAFFA SPORTS CLUB FOR ASPIRE ZONE

因此，您可以将其包装为<p>，并<strong>为单行：

$("<p style='font-family:Arial;letter-spacing:0.05pt;'><strong>" + $("span").text() + "</p></strong>");

你可以这样使用：

$("#output").prepend(...the above...)

在这里演示 - http://jsfiddle.net/sifriday/vh8ehn0u/1/

要使其适用于多个段落，请执行以下操作：

$("p").each(function(idx, para) {
        var output = $("<p style='font-family:Arial;letter-spacing:0.05pt;'><strong>" + $("span", $(para)).text() + "</p></strong>");
        // Do something with output here
});

你不需要内联样式，也不需要<strong>标签 - 为此使用 CSS -

突然之间，这变得更容易和更干净。 

$("strong span").each(function(){ 
    $("body,#orNewParentElementOfYourChoice").append("<p>"+$(this).text()+"</p>"); 
    });

我认为您应该修改页面的HTML结构，但是如果您不想这样做，那么这是适合您的工作JSFiddle。

我已经删除了这里除一个之外的所有<strong>标签，并将所需的输出放在剩余<strong>元素内的<span>中。

相关文章：