jQuery查找并替换元素中的关键字

jquery find and replace keywords in an element

本文关键字：关键字 元素 替换 查找 jQuery      更新时间：2023-09-26

有没有办法循环遍历并查找和替换元素中的某些单词？ 这是我尝试过但没有打球的。

HTML 示例：

<div class="homepage-boxes">
    <h2 class="ty-mainbox-simple-title">Shop Interior Bean Bags</h2>
    <h2 class="ty-mainbox-simple-title">Shop Outdoor Bean Bags</h2>
    <h2 class="ty-mainbox-simple-title">Buy Kids Bean Bags</h2>
    <h2 class="ty-mainbox-simple-title">Buy Baby Bean Bags</h2>
</div>

.js：

$('.homepage-boxes .ty-mainbox-simple-title').each(function() {
    $(this).html().replace('Shop','');
    $(this).html().replace('Buy','');
    $(this).html().replace('Bean Bags','');
});

预期输出：

<div class="homepage-boxes">
    <h2 class="ty-mainbox-simple-title">Interior</h2>
    <h2 class="ty-mainbox-simple-title">Outdoor</h2>
    <h2 class="ty-mainbox-simple-title">Kids</h2>
    <h2 class="ty-mainbox-simple-title">Baby</h2>
</div>

问题是，即使您正在替换内容，html 也不会设置回元素。

您可以将 setter 版本的 .html() 与正则表达式替换一起使用，例如

$('.homepage-boxes .ty-mainbox-simple-title').html(function(i, html) {
  return html.replace(/Shop|Buy|Bean Bags/g, '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="homepage-boxes">
  <h2 class="ty-mainbox-simple-title">Shop Interior Bean Bags</h2>
  <h2 class="ty-mainbox-simple-title">Shop Outdoor Bean Bags</h2>
  <h2 class="ty-mainbox-simple-title">Buy Kids Bean Bags</h2>
  <h2 class="ty-mainbox-simple-title">Buy Baby Bean Bags</h2>
</div>

你必须在

replace之后reset html 

$('.homepage-boxes .ty-mainbox-simple-title').each(function() {
    $(this).html($(this).html().replace('Shop','').replace('Buy','').replace('Bean Bags',''));
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="homepage-boxes">
    <h2 class="ty-mainbox-simple-title">Shop Interior Bean Bags</h2>
    <h2 class="ty-mainbox-simple-title">Shop Outdoor Bean Bags</h2>
    <h2 class="ty-mainbox-simple-title">Buy Kids Bean Bags</h2>
    <h2 class="ty-mainbox-simple-title">Buy Baby Bean Bags</h2>
</div>

您必须将替换的字符串放入 h2 中才能显示结果

$('.homepage-boxes').find('h2.ty-mainbox-simple-title').each(function() {
  $(this).html($(this).html().replace('Shop', ''));
  $(this).html($(this).html().replace('Buy', ''));
  $(this).html($(this).html().replace('Bean Bags', ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="homepage-boxes">
  <h2 class="ty-mainbox-simple-title">Shop Interior Bean Bags</h2>
  <h2 class="ty-mainbox-simple-title">Shop Outdoor Bean Bags</h2>
  <h2 class="ty-mainbox-simple-title">Buy Kids Bean Bags</h2>
  <h2 class="ty-mainbox-simple-title">Buy Baby Bean Bags</h2>
</div>

$('.homepage-boxes .ty-mainbox-simple-title').each(function() {
    var $this = $(this);
    $this.text( $this.text().replace('Shop','') );
    $this.text( $this.text().replace('Buy','') );
    $this.text( $this.text().replace('Bean Bags','') );
});
相关文章：