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>