Question

我有此代码：

<label class="hulkapps_check_option">
<input type="checkbox" data-price="4000.00">
Basic banner design (+$ 4000.00)
</label>

我需要在标签中找到文本“ .00”，并将其替换为“ MXN”，但不影响输入。每当我尝试任何替换文本的操作时，都会删除标签内的输入内容。如何在不删除标签内部输入的情况下替换标签中的文本？

Answer 1

第一个选项是将您的文本放在<span>中，然后可以从jQuery轻松访问它。 jQuery不能很好地处理纯文本节点。

如果由于某种原因无法更改HTML，则可以使用.contents()和.this.nodeType === 3（其中3是文本节点）。

$('.hulkapps_check_option').contents().each(function() {
  if (this.nodeType === 3) {
    this.textContent
      ? this.textContent = this.textContent.replace(/\.00/g, " MX")
      : this.innerText = this.innerText.replace(/\.00/g, " MX")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hulkapps_check_option">
  <input type="checkbox" data-price="4000.00">
  Basic banner design (+$ 4000.00)
</label>

您可以使用.html()来获取带有输入的文本。

虽然这在这种情况下有效-在一般情况下它太脆弱而无法工作（例如，如果您想用“ POST”更改所有“ put”，那么您将得到{{1} }。

您还会丢失任何可能对标签内的任何元素产生的事件。

<inPOST type="checkbox"

var h = $(".hulkapps_check_option").html().replace(/\.00/g, " MXN");
$(".hulkapps_check_option").html(h);

Answer 2

您可以使用下面的代码，我只是检查它是否对我有用。

$(".hulkapps_check_option").text(function() {
  return $(this).text().replace(".00", " MXN");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="hulkapps_check_option_before">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>

<hr/>

<label class="hulkapps_check_option">
    <input type="checkbox" data-price="4000.00">
    Basic banner design (+$ 4000.00)
</label>

Answer 3

这是使用标准Javascript DOM API实现目标的一种方式：

const label = document.querySelector('.hulkapps_check_option');
const labelTextNode = label.childNodes[2];
label.removeChild(label.childNodes[2]);
label.appendChild(new Text(labelTextNode.wholeText.replace('.00', 'MXN')));

<label class="hulkapps_check_option">
  <input type="checkbox" data-price="4000.00">
  Basic banner design (+$ 4000.00)
</label>

替换内部有输入的标签中的文本，而不影响输入

3 个答案: