代码之家 › 专栏 › 技术社区 › Harsh Patel Sam

排除SPAN标记内容,仅获取LI和标记内容

cheerio node.js javascript

Harsh Patel Sam · 技术社区 · 6 年前

这是我的代码:

HTML:

<div class="ingredients-list">
    <div class="ingredients-list__content">
        <li >1 head Baby Gem lettuce</li>
        <li>cucumber</li>
        <li>
           fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
           <span class="ingredients-list__glossary-element" id="ingredients-glossary">
              <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                 <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                 <span class="fonetic text-style-alt">mi-nt</span>
                 <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
              </article>
           </span>
        </li>

        <li>1 tbsp fresh lemon juice</li>
        <li>
           100g can <a href="/glossary/tuna">tuna</a> in brine
           <span >
              <article>
                 <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                 <span class="fonetic text-style-alt">tune-ah</span>
                 <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
              </article>
           </span>
        </li>
        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
     </ul>
  </div>
</div>

我尝试过:

$('.ingredients-list li', html).each(function(i, elm) {
    console.log($(this).text()) // for testing do text() 
});

当前O/P

1 head Baby Gem lettuce
cucumber
fresh mint Mint mi-ntThere are several types of mint, each with its own subtle difference in flavour and appearance.â¦ 
1 tbsp fresh lemon juice
100g can tuna in brine Tuna tune-ahA member of the mackerel family, tuna are mainly found in the world's warmer oceans. Theyâ¦ 
2 mini pitta breads

预期O/P

1 head Baby Gem lettuce
cucumber
fresh mint 
1 tbsp fresh lemon juice
100g can tuna in brine
2 mini pitta breads

我怎么穿过锂但删除跨度标记一些内部的内容锂标签?

3 回复 | 直到 6 年前

Mamun 6 年前

你可以查一下 节点类型 属性只返回每个锂元素:

$('.ingredients-list li').each(function(i, elm) {
  var text = $(this).contents().filter(function() {
    return this.nodeType == 3 || $(this).is('a'); // text node or anchor
  }).text().trim();
  console.log(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingredients-list">
    <div class="ingredients-list__content">
	<ul>
        <li >1 head Baby Gem lettuce</li>
        <li>cucumber</li>
        <li>
           fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
           <span class="ingredients-list__glossary-element" id="ingredients-glossary">
              <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                 <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                 <span class="fonetic text-style-alt">mi-nt</span>
                 <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
              </article>
           </span>
        </li>

        <li>1 tbsp fresh lemon juice</li>
        <li>
           100g can <a href="/glossary/tuna">tuna</a> in brine
           <span >
              <article>
                 <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                 <span class="fonetic text-style-alt">tune-ah</span>
                 <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
              </article>
           </span>
        </li>
        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
     </ul>

Yosvel Quintero 6 年前

没有必要对所有 '.ingredients-list li' 元素。。

你可以使用 $('.ingredients-list li').find('span').remove(); 删除所有 span 元素。

代码:

$('.ingredients-list li').find('span').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingredients-list">
  <div class="ingredients-list__content">
    <li>1 head Baby Gem lettuce</li>
    <li>cucumber</li>
    <li>
      fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
      <span class="ingredients-list__glossary-element" id="ingredients-glossary">
              <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                 <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                 <span class="fonetic text-style-alt">mi-nt</span>
      <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
      </article>
      </span>
    </li>

    <li>1 tbsp fresh lemon juice</li>
    <li>
      100g can <a href="/glossary/tuna">tuna</a> in brine
      <span>
              <article>
                 <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                 <span class="fonetic text-style-alt">tune-ah</span>
      <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
      </article>
      </span>
    </li>
    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
    </ul>
  </div>
</div>

Raghav Rangani 6 年前

var html = '<div class="ingredients-list">
        <div class="ingredients-list__content">
            <li >1 head Baby Gem lettuce</li>
            <li>cucumber</li>
            <li>
               fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
               <span class="ingredients-list__glossary-element" id="ingredients-glossary">
                  <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                     <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                     <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                     <span class="fonetic text-style-alt">mi-nt</span>
                     <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
                  </article>
               </span>
            </li>

            <li>1 tbsp fresh lemon juice</li>
            <li>
               100g can <a href="/glossary/tuna">tuna</a> in brine
               <span >
                  <article>
                     <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                     <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                     <span class="fonetic text-style-alt">tune-ah</span>
                     <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
                  </article>
               </span>
            </li>
            <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
         </ul>
      </div>
    </div>';

var div = $("<div>"); 
div.html(html);

div.find('.ingredients-list li').each(function(i, elm) {
  $(this).find('span').remove(); 
  console.log($(this).text().trim()); 
});