替换标题中的文本 - 未捕获的类型错误：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&nbsp;(#1843)。最后，我们将textContent再次使用 span 中设置新标题。运行下面的代码片段以查看它是否正常工作。function cutId() {&nbsp; //get all tds&nbsp; let allTds = document.querySelectorAll(".vpe-img-td span");&nbsp; //Foreach Loop&nbsp; allTds.forEach(function(data) {&nbsp; &nbsp; //Get the text&nbsp;&nbsp; &nbsp; let spanText = data.textContent&nbsp; &nbsp; //Slice the title&nbsp; &nbsp; let slice = spanText.slice(0, 7)&nbsp; &nbsp; //Set title again&nbsp; &nbsp; data.textContent = spanText.replace(spanText, slice)&nbsp; })}cutId();<div class="vpe_table_responsive">&nbsp; <table class="vpe_table" id="vpe_table">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>Title</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Title</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Title</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Title</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody class="pagination_row">&nbsp; &nbsp; &nbsp; <tr class="vpe_row variant-1843" data-tobeshown="no">&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Title" id="vpe-title-td-1843" class="vpe-img-td">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Talla 1 (#1843)</span>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Title" id="vpe-title-td-1843" class="vpe-img-td">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Talla 2 (#8888)</span>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Title" id="vpe-title-td-1843" class="vpe-img-td">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Talla 3 (#8216)</span>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Title" id="vpe-title-td-1843" class="vpe-img-td">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Talla 4 (#1588)</span>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div>