替换标题中的文本-未捕获的TypeError: str.substring不是一个函数

Question

我试图通过使用slice、replace等来修改第三方跨度(换句话说，我无法访问该部分代码)。然而，我尝试过的方法都不起作用，因为它们都会给我带来相同的错误：

Uncaught TypeError: str.substring is not a function
    at cutId ((index):1004)
    at (index):1006

我尝试修改的代码如下：

<div class="vpe_table_responsive">
    <table class="vpe_table" id="vpe_table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody class="pagination_row">
            <tr class="vpe_row variant-1843" data-tobeshown="no">
                 <td data-title="Title" id="vpe-title-td-1843" class="vpe-img-td">
                      <span>Talla 4 (#1843)</span>
                 </td>

在网页的标题下，我有一个大小(Talla 7)，后面跟着一个id，所有这些都在相同的span标记内。我的目标是从标题列中删除(#1843)。

下面是我尝试过的：

<script>
   function cutId() {
       let str = document.querySelectorAll(".vpe-img-td");
     str = str.substring(-7);
     }
   cutId();
</script>

Answer 1

您可以通过使用slice方法和querySelectorAll > span来完成此操作。替换标题的文本。这将是Title 4

首先，我们将获得您的跨度的实际切片，然后我们使用0,7中的textContent，它将只是标题，不包括(#1843)。

最后，我们将再次使用textContent在跨度中设置新标题。

运行下面的代码片段查看它的工作情况。

​

function cutId() {
  //get all tds
  let allTds = document.querySelectorAll(".vpe-img-td span");

  //Foreach Loop
  allTds.forEach(function(data) {

    //Get the text 
    let spanText = data.textContent

    //Slice the title
    let slice = spanText.slice(0, 7)

    //Set title again
    data.textContent = spanText.replace(spanText, slice)
  })

}
cutId();

<div class="vpe_table_responsive">
  <table class="vpe_table" id="vpe_table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody class="pagination_row">
      <tr class="vpe_row variant-1843" data-tobeshown="no">
        <td data-title="Title" id="vpe-title-td-1843" class="vpe-img-td">
          <span>Talla 1 (#1843)</span>
        </td>
        <td data-title="Title" id="vpe-title-td-1843" class="vpe-img-td">
          <span>Talla 2 (#8888)</span>
        </td>
        <td data-title="Title" id="vpe-title-td-1843" class="vpe-img-td">
          <span>Talla 3 (#8216)</span>
        </td>
        <td data-title="Title" id="vpe-title-td-1843" class="vpe-img-td">
          <span>Talla 4 (#1588)</span>
        </td>
      </tr>
    </tbody>
  </table>

</div>

​