Replace text from titles - Uncaught TypeError: str.substring is not a function

Question

I am trying to modify a 3rd party span (in other words, I don't have access to that part of the code) by using either slice, replace, etc. However, none of the methods I have tried are working as they all bring me the same error:

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

The code I am trying to modify is as below:

<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>

In the webpage, Under the title, I have the size (Talla 7) followed by an id all within the same span tag. My objective is to eliminate the (#1843) from the title column.

Here is what I have tried:

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

`querySelectorAll` returns all nodes matching that class. use `querySelector` - but you will have issue with that too. [This](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) might help — Always Helping, Jul 29 '20 at 03:15
...and even then it wouldn't work because an `HTMLElement` is not a string and doesn't have a method `substring`. — CherryDT, Jul 29 '20 at 03:18
Relevant: [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/q/10693845) — VLAZ, Jul 29 '20 at 03:20
This article may help in your situation: https://gabrieleromanato.name/javascript-how-to-slice-dom-elements — White Link, Jul 29 '20 at 03:24

Always Helping · Accepted Answer · 2020-07-29T03:57:04.470

You can do this by using slice method and querySelectorAll > span. Replace the text of your title. Which will be Title 4

First we will get actual textContent of the your span and then we use slice from 0,7 which will Just title excluding (#1843).

Lastly, we will set the new title back in the span using textContent again.

Run snippet below to see it working.

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>

Always Helping, Thank you. It worked for the first item but there are many other td's with spans including the (#number). Any hints on how I could eliminate those as well? In the meantime, I will rate this as the right answer — Erik James Robles, Jul 29 '20 at 03:44
@ErikJamesRobles I have edited my answer to do `multiple` title from `td's` replacements. Check now. — Always Helping, Jul 29 '20 at 03:57

Replace text from titles - Uncaught TypeError: str.substring is not a function

1 Answers1