替换标题中的文本 - 未捕获的类型错误：str.substring 不是函数

Question

我正在尝试通过使用切片、替换等来修改第 3 方跨度（换句话说，我无法访问那部分代码）。但是，我尝试过的所有方法都无法正常工作给我带来同样的错误：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

首先，我们将获得您的跨度的实际textContent，然后我们使用 0,7 中的切片，它将 Just title excluding (#1843)。

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

运行下面的代码片段以查看它是否正常工作。

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>