替换标题中的文本-未捕获类型错误: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，所有这些都在同一个跨度标签内。我的目标是从标题栏中删除(#1843(。

以下是我尝试过的：

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

Answer 1

您可以使用slice方法和querySelectorAll>CCD_ 2。替换标题的文本。哪个将是Title 4

首先，我们将获得跨度的实际文本内容，然后我们使用0.7的切片，这将只是标题，不包括(#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>