Мобильные номера в читаемый вид. replace на всей странице

Прошу помощи.. Есть таблица которую получаю из БД. Хочется все мобильные номера, в момент загрузки страницы переделать в читаемый вид, вида 8 (901) 123 45 67 Вроде бы все просто, но как это ко всей таблице применить?

var str = document.querySelectorAll(".phoneS")[0].innerHTML;
str = str.replace(/(\d{1})(\d{3})(\d{3})(\d{2})(\d{2})/gi, "$1 ($2) $3 $4 $5");
console.log(str);
document.querySelectorAll(".phoneS")[0].innerHTML=str;

Сама таблица:

<table id="tdf">
    <thead>
    <tr>
        <th class="th-aster">Направление</th>
        <th class="th-aster">Подразделение</th>
        <th class="th-aster">Отдел</th>
        <th class="th-aster">Должность</th>
        <th class="th-aster">Ф.И.О.</th>
        <th class="th-aster">Номер</th>
        <th class="th-aster">Мобильный</th>
        <th class="th-aster">Амба</th>
    </tr>
    </thead>

    <tbody class="shift-aster">

    <tr>
        <td class="td-aster">Подра</td>
        <td class="td-aster">Отдел</td>
        <td class="td-aster"></td>
        <td class="td-aster">Ген</td>
        <td class="td-aster">Иванов Олег</td>
        <td class="td-aster">3700</td>
        <td id="td1" class="phoneS" name = "phone">81111297077</td>
        <td class="td-aster">ara</td>
    </tr>
    <tr>
        <td class="td-aster">Заместитель управляющего</td>
        <td class="td-aster">Отдел труда</td>
        <td class="td-aster"></td>
        <td class="td-aster">старший</td>
        <td class="td-aster">Иванова Наталья Львовна</td>
        <td class="td-aster">2440</td>
        <td id="td1" class="phoneS" name = "phone"></td>
        <td class="td-aster">ara</td>
    </tr>
    <tr>
        <td class="td-aster">Заместитель директора по 555</td>
        <td class="td-aster">Управление по работе с 555</td>
        <td class="td-aster">Отдел апвапвап</td>
        <td class="td-aster">Менеджер</td>
        <td class="td-aster">Иванова Анна Юрьевна</td>
        <td class="td-aster">2447</td>
        <td id="phone-number" class="phoneS" name = "phone">89011335678</td>
        <td class="td-aster">ara</td>
    </tr>
    </tbody>
</table>

Ответы (1 шт):

Автор решения: OPTIMUS PRIME

>> Циклы (MDN)

let phones = document.querySelectorAll(".phoneS");

for (let i = 0; i < phones.length; i++) {
  phones[i].textContent = phones[i].textContent.replace(
    /(\d)(\d{3})(\d{3})(\d\d)(\d\d)/gi, "$1 ($2) $3 $4 $5"
  );
}
<div class="phoneS">81111297077</div>
<div class="phoneS">89011335678</div>
<div class="phoneS">89011445579</div>

→ Ссылка