Replace text inside elements with text from other elements using javascript

I have this table:

<table class="sales-shipments">
    <thead>
        <tr>
            <th class="shipment-customer-name">Customer Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="replacetext SO-00012962">replacetextSO-00012962</td>
        </tr>
        <tr>
            <td class="replacetext SO-00012909">replacetextSO-00012909</td>
        </tr>
        <tr>
            <td class="replacetext SO-00013031">replacetextSO-00013031</td>
        </tr>
        <tr>
            <td class="replacetext SO-00013002">replacetextSO-00013002</td>
        </tr>
        <tr>
            <td class="replacetext SO-00013032">replacetextSO-00013032</td>
        </tr>
    </tbody>
</table>

And I would like to replace the text that’s inside the elements that has the class “replacetext” with the text that has the class “sourcetext” below:

<div id="source-elements">
    <div class="sourcetext SO-00012962">Customer Name 1</div>
    <div class="sourcetext SO-00012909">Customer Name 2</div>
    <div class="sourcetext SO-00013031">Customer Name 3</div>
    <div class="sourcetext SO-00013002">Customer Name 4</div>
    <div class="sourcetext SO-00013032">Customer Name 5</div>
</div>

For example “replacetextSO-00012962” would be replaced with “Customer Name 1” taken from the div with the classes “sourcetext” and “SO-00012962” and this would be repeating for the remainer so that “replacetext” will always be replaced with “sourcetext” inside the column labelled “Customer Name”.

Do you know you how this can be done in vanilla javascript?

Answer

You can iterate through every replacetext and get the distinctive id (second class value of the element) and add .sourcetext at the begining of it and we have the class of source, get the text and replace.

Here is an example:

function replace() {
  const replaces = document.querySelectorAll('.replacetext');
  const sources = document.querySelectorAll('.sourcetext');

  replaces.forEach(e => {
    const source = '.sourcetext.'+e.classList[1];
    e.innerText = document.querySelector(source).innerText;
  });
}

document.querySelector('#replace').addEventListener('click', replace);
<button id="replace">Replace</button>

<table class="sales-shipments">
  <thead>
    <tr>
      <th class="shipment-customer-name">Customer Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="replacetext SO-00012962">replacetextSO-00012962</td>
    </tr>
    <tr>
      <td class="replacetext SO-00012909">replacetextSO-00012909</td>
    </tr>
    <tr>
      <td class="replacetext SO-00013031">replacetextSO-00013031</td>
    </tr>
    <tr>
      <td class="replacetext SO-00013002">replacetextSO-00013002</td>
    </tr>
    <tr>
      <td class="replacetext SO-00013032">replacetextSO-00013032</td>
    </tr>
  </tbody>
</table>


<div id="source-elements">
  <div class="sourcetext SO-00012962">Customer Name 1</div>
  <div class="sourcetext SO-00012909">Customer Name 2</div>
  <div class="sourcetext SO-00013031">Customer Name 3</div>
  <div class="sourcetext SO-00013002">Customer Name 4</div>
  <div class="sourcetext SO-00013032">Customer Name 5</div>
</div>