javascript - jquery 查找并替换元素中的关键字

Question

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

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>

Answer 1

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

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

$('.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>