How can I dynamically update or replace text using JavaScript

Question

I am developing a web application, and I need to globally replace text throughout the entire site within the page layout using JavaScript. How can I achieve this effectively?

<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <button class="nav-link active" id="nav-home-tab"    data-bs-toggle="tab" dada-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="True">عن الوكالة</button>
        <button class="nav-link"        id="nav-profile-tab" data-bs-toggle="tab" dada-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="True"></button>
        <button class="nav-link"        id="nav-profile-tab" data-bs-toggle="tab" dada-bs-target="#nav-profile1" type="button" role="tab" aria-controls="nav-profile1" aria-selected="True"></button>
        <button class="nav-link"        id="nav-profile-tab" data-bs-toggle="tab" dada-bs-target="#nav-profile2" type="button" role="tab" aria-controls="nav-profile2" aria-selected="True"></button>
        <button class="nav-link"        id="nav-profile-tab" data-bs-toggle="tab" dada-bs-target="#nav-profile3" type="button" role="tab" aria-controls="nav-profile3" aria-selected="True"></button>
        <button class="nav-link"        id="nav-profile-tab" data-bs-toggle="tab" dada-bs-target="#nav-profile4" type="button" role="tab" aria-controls="nav-profile4" aria-selected="True"></button>
    </div>
</nav>

Answer 1

Replace text in a page using JavaScript

To replace text throughout the entire page using JavaScript, you should follow the below steps in details :

1. Open _Layout.cshtml

2. Insert the following script at the end of the page .

    <script>
    var container = document.getElementById("nav-tab");
    var buttons = container.querySelectorAll('button');
   
      buttons.forEach(function(button){
   
      if(button.innerText.trim() === 'عن الوكالة')
         button.innerText = 'الخدمات' ;
      });
     </script>