获取没有标签的 HTML 文本 [重复]答案

【问题标题】：Get HTML Text that has no tag [duplicate]获取没有标签的 HTML 文本 [重复]
【发布时间】：2017-05-11 15:09:10
【问题描述】：

我正在尝试通过 jquery 访问没有 HTML 的 DIV 中的一段文本（在本例中为“12 个月”）。我知道如果我知道 class 或 id 就可以找到它，但在这种情况下，它似乎无法被抓住。有人可以提供潜在的解决方案吗？

<div class="pms-subscription-plan">
<label>
<input type="radio" name="subscription_plans" data-price="19.99" data-duration="12" value="1219">$19.99 cada 12 meses</label>
<span class="pms-divider"> - </span><span class="pms-subscription-plan-price">19.99</span>
<span class="pms-subscription-plan-currency">$</span>
<span class="pms-divider"> / </span> 12 Months //This piece of text is the one I need to get and change
<div class="pms-subscription-plan-description">Si usted escogió la suscripción $19.99, se le cobrará por esa cantidad anualmente.</div>
</div>

如果有帮助，这里是检查器中看到的代码的打印输出。

【问题讨论】：

你想用它做什么？
@mr.void 隐藏或更改。
$('label').text();
stackoverflow.com/questions/16090487/… 的第一个答案解决了这个问题。

标签： javascript jquery html

【解决方案1】：

这行得通！

var a = $('.pms-subscription-plan').first().contents().filter(function() {
    return this.nodeType == 3;
}).text();

console.log($.trim(a));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pms-subscription-plan">
  <label>
    <input type="radio" name="subscription_plans" data-price="19.99" data-duration="12" value="1219">$19.99 cada 12 meses</label>
  <span class="pms-divider"> - </span><span class="pms-subscription-plan-price">19.99</span>
  <span class="pms-subscription-plan-currency">$</span>
  <span class="pms-divider"> / </span> 12 Months
  <div class="pms-subscription-plan-description">Si usted escogió la suscripción $19.99, se le cobrará por esa cantidad anualmente.</div>
</div>

但你必须确保你不会重组。

【讨论】：

【解决方案2】：

var text = $(".pms-subscription-plan").contents().filter(function() {
    return this.nodeType == Node.TEXT_NODE;
}).text();

【讨论】：

【解决方案3】：

在这种情况下，以下代码将起作用：

document.getElementsByClassName("pms-divider")[1].nextSibling

但是，我强烈建议将此文本放在标签中。如果您以任何方式重组 DOM，此代码将不起作用。

【讨论】：

【解决方案4】：

在 HTML 中有元素和节点。每一段文本都是一个节点。您可以使用childNodes 集合。

var textNode = document.querySelector(".pms-subscription-plan").childNodes[9].data.trim();

【讨论】：

这将得到“$19.99 cada 12 meses”而不是“12 Months”，它不是 @987654323 的子节点@
感谢您的信息，我已更新。

【解决方案5】：

正如其他人所建议的，您可以使用节点/下一个兄弟节点来获取文本。

但是，对您的 html/css 进行小幅调整会是一个更好的选择，例如：

<div class="pms-subscription-plan">

<label>
<input type="radio" name="subscription_plans" data-price="19.99" data-duration="12" value="1219">$19.99 cada 12 meses</label>
<span class="pms-divider"> - </span><span class="pms-subscription-plan-price">19.99</span>
<span class="pms-subscription-plan-currency">$</span>
<span class="pms-divider">/</span> 
<span class="pms-duration">12 Months</span>  <!--add a span class for duration--->
<div class="pms-subscription-plan-description">Si usted escogió la suscripción $19.99, se le cobrará por esa cantidad anualmente.</div>
</div>

从长远来看，这个小改动 [为持续时间添加一个跨度类] 会让您更轻松。只是我的 tuppence！

希望对你有帮助

【讨论】：

【解决方案6】：

此功能将删除所有标签和内容。剩下的是你需要的文字：

function removeTags(){
  var txt = $(".pms-subscription-plan").html();
  var rex = /(<([^>]+)>).*(<([^>]+)>)|(<([^>]+)>)/ig;
  alert(txt.replace(rex , ""));
}

【讨论】：