Question

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

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

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。

Live Demo

更新

几乎我期待这个输出：

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

Answer 1

您不需要内联样式，也不需要标记 - 请使用CSS -

突然间，这变得更容易了。清洁器。

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

Answer 2

您可以使用所有跨度的.text（）轻松实现此目的：

$("span").text()

会给你

OUTDOOR COOLING OF AL GHARAFFA SPORTS CLUB FOR ASPIRE ZONE

所以你可以把它作为一个单一的和包装起来：

$("<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
});

Answer 3

我认为您应该修改页面的HTML结构，但如果您不想这样做，那么Here is the working JSFiddle就可以了。

此处我删除了除个标记之外的所有标记，并将所需的输出放在剩余元素内的内。

使用jQuery面对`html`清理挑战

3 个答案: