如何使用jQuery从html中提取以下文本

Question

这是HTML代码..我想像这样提取...“Magic Mouse 2的设计令人印象深刻，它完全可以充电，因此您无需使用传统电池。它更轻，由于其内置电池和连续的底部外壳，活动部件更少，脚部设计也得到了优化--所有这些都有助于Magic Mouse 2更轻松地跟踪，在桌面上移动阻力更小。多点触控表面允许您执行简单的手势，如在网页之间滑动和滚动文档。Magic Mouse 2开箱即用，并可自动与Mac电脑配对

非常敏感的项目。“

​

<div id = "ctl00_ContentPlaceHolderFull_productInfoTabUC_divOverview">
<p>.text 1</p>
<p>.text 2</p>
<p>.text 3</p>
<p>.text 4</p>
<h6 class="NoBottomMargin"></h6>
"Featuring impressive design, Magic Mouse 2 is completely rechargeable, so you'll eliminate the use of traditional batteries. It's lighter, has fewer moving parts thanks to its built-in battery and continuous bottom shell, and has an optimized foot design - all helping Magic Mouse 2 track easier and move with less resistance across your desk. And the multi-touch surface allows you to perform simple gestures such as swiping between web pages and scrolling through documents. Magic Mouse 2 is ready to go right out of the box and pairs automatically with your Mac."
<br>
Very sensitive item.
<br>
<h6 class="NoBottomMargin">specifivation</h6>
<ul>
<li>Magic is in the multi-touch</li>
<li>One or two, left or right</li>
<li>Laser tracking engine</li>
</ul>
</div>

​

Answer 1

首先，您应该将文本包含在<p>标记中-因为它包含文本并确保它只提取特定的元素-我在p中添加了一个类，目标是使用.text()，您还应该缩进您的代码以便于阅读。

​

var requiredText = $(".getThisText").text();
console.log(requiredText)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id = "ctl00_ContentPlaceHolderFull_productInfoTabUC_divOverview">
  <p>.text 1</p>
  <p>.text 2</p>
  <p>.text 3</p>
  <p>.text 4</p>
  <h6 class="NoBottomMargin"></h6>
  <p class="getThisText">"Featuring impressive design, Magic Mouse 2 is completely rechargeable, so you'll eliminate the use of traditional batteries. It's lighter, has fewer moving parts thanks to its built-in battery and continuous bottom shell, and has an optimized foot design - all helping Magic Mouse 2 track easier and move with less resistance across your desk. And the multi-touch surface allows you to perform simple gestures such as swiping between web pages and scrolling through documents. Magic Mouse 2 is ready to go right out of the box and pairs automatically with your Mac."
     <br>
      Very sensitive item.
     <br>
  </p>
  <h6 class="NoBottomMargin">specification</h6>
  <ul>
    <li>Magic is in the multi-touch</li>
    <li>One or two, left or right</li>
    <li>Laser tracking engine</li>
  </ul>
</div>

​

Answer 2

您可以使用nextSibling。

​

console.log($($('.NoBottomMargin')[0].nextSibling).text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "ctl00_ContentPlaceHolderFull_productInfoTabUC_divOverview">
<p>.text 1</p>
<p>.text 2</p>
<p>.text 3</p>
<p>.text 4</p>
<h6 class="NoBottomMargin"></h6>
"Featuring impressive design, Magic Mouse 2 is completely rechargeable, so you'll eliminate the use of traditional batteries. It's lighter, has fewer moving parts thanks to its built-in battery and continuous bottom shell, and has an optimized foot design - all helping Magic Mouse 2 track easier and move with less resistance across your desk. And the multi-touch surface allows you to perform simple gestures such as swiping between web pages and scrolling through documents. Magic Mouse 2 is ready to go right out of the box and pairs automatically with your Mac."
<br>
Very sensitive item.
<br>
<h6 class="NoBottomMargin">specifivation</h6>
<ul>
<li>Magic is in the multi-touch</li>
<li>One or two, left or right</li>
<li>Laser tracking engine</li>
</ul>
</div>

​

Answer 3

我得到了答案：

if($("[id$='divOverview'] .NoBottomMargin").length){
        $("[id$='divOverview'] .NoBottomMargin").eq(0).nextUntil('.NoBottomMargin').each(function(){
            detail.description += "\n" + $(this)[0].previousSibling.nodeValue;
        });
    }