javascript - 使用 jQuery 修剪文本

Question

就我而言，我有很多这样的文字：

(name price currency * quantity)

Blue Book 5 $ * 100

Green Books 34 Uk * 50

和 ...

这是我的 html 和 jQuery 代码。

    jQuery('td.quantity_col dd.variation- p').text(function(_, curr) {  
        //jQuery('p.time').text('Time of match')
      return  curr.split('*').pop().trim();      
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<table class="woocommerce">

    <tr>
        <td class="tdclass quantity_col">
            <dl class="variation">
                    <dd class="variation-"><p class="time">Blue Book 5 $ * 100</p></dd>   
            </dl>
        </td>
    </tr>
    <tr>
        <td class="tdclass quantity_col">
            <dl class="variation">
                    <dd class="variation-"><p>green Books 34 Uk * 50</p></dd> 
            </dl>
        </td>
    </tr>
</tbody>
</table>

我想修剪如下文本：

Blue Book 5 $ * 100  --->  Blue Book

Green Books 34 Uk * 50 ---> Green Books

jquery的任何解决方案？

标签： javascripthtmljquery

Answer 1

你可以这样做，但我不得不说你的代码很乱。在尝试与 DOM 交互之前，您应该对其进行一些清理。

$(document).ready(function() {
  $('td.quantity_col dl dd.variation- p').each(function(i,x) {  
    if (i%3 == 1) {
      console.log($(this).text().split(/\d/)[0].trim())
      $(this).text($(this).text().split(/\d/)[0].trim())
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="woocommerce">
<tbody>
    <tr>
        <td class="tdclass">#1</td>
        <td class="tdclass"><span class="other_item">wallet</span></td>
        <td class="tdclass">$45</td>
    </tr>
    <tr>
        <td class="tdclass">#2</td>
        <td class="tdclass quantity_col">
            <dl class="variation">
                <dt class="variation-">Select Category :</dt>
                    <dd class="variation-"><p>Category 1</p></dd>
                <dt class="variation-">Select Product :</dt>
                    <dd class="variation-"><p class="time">Blue Book 5 $ * 100</p></dd>
                <dt class="variation-">Link :</dt>
                    <dd class="variation-"><p><a href="#" rel="nofollow">Link</a></p></dd>      
            </dl>
            <span class="other_item">wallet2</span>
        </td>
        <td class="tdclass">$35</td>
    </tr>
    <tr>
        <td class="tdclass">#2</td>
        <td class="tdclass quantity_col">
            <dl class="variation">
                <dt class="variation-">Select Category :</dt>
                    <dd class="variation-"><p>Category 1</p></dd>
                <dt class="variation-">Select Product :</dt>
                    <dd class="variation-"><p>green Books 34 Uk * 50</p></dd>
                <dt class="variation-">Link :</dt>
                    <dd class="variation-"><p><a href="#" rel="nofollow">Link</a></p></dd>      
            </dl>
            <span class="other_item">wallet2</span>
        </td>
        <td class="tdclass">$35</td>
    </tr>
</tbody>
</table>

应该有一种方法可以使用适当的 CSS 选择器来做到这一点，但是看到你的 DOM 很乱，我没有检查 CSS 解决方案。