What is the most efficient way to substitute text within an HTML document?

Question

What is the most efficient way to substitute text within an HTML document?

Is there a way to switch between languages on a website to replace text on multiple pages with a simple button click? What is the most efficient method for achieving this?

This code snippet only changes text in the first div. Is there a way to implement a language change feature that applies across the entire site?

var text1 = document.getElementById('english');
var text2 = document.getElementById('swedish');

const swap = () => {
  if (text1.classList.contains("hidden")) { //if english contains class 'hidden'
    text1.classList.remove("hidden"); //remove hidden class from english
    text2.classList.add("hidden"); //add hidden class to swedish
  } else {
    text1.classList.add("hidden"); //add hidden class to english
    text2.classList.remove("hidden"); //remove hidden class from swedish
  }
}

.hidden {
  display: none;
}

<button onclick="swap()">Switch Text</button>

<div class="content">
  <div id="english">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id="swedish" class="hidden">
    <h1>Vällkommen</h1>
    <p>Svensk tekst</p>
  </div>
</div>

javascript html css

Answer 1

Answer №1

Remember to properly implement the use of the lang attribute
Utilize classList.toggle for efficient toggling

This script should be added to all pages where the language is set to any of the specified languages.

Adjust the lang attribute as needed. Update lang="en"/lang="sv" in the script accordingly

Uncomment the lines with localStorage and eliminate the line: let savedLang = "se_SV"; from your site

window.addEventListener("DOMContentLoaded", () => {
  //let savedLang = localStorage.getItem("lang") || "gb_EN";
  let savedLang = "se_SV";
  const btn = document.getElementById("swap");
  btn.dataset.lang = savedLang;

  btn.addEventListener("click", (e) => {
    const tgt = e.target;
    let lang = tgt.dataset.lang;
    lang = lang === "gb_EN" ? "se_SV" : "gb_EN";
    tgt.dataset.lang = lang;
    // localStorage.setItem("lang",lang);
    const divs = document.querySelectorAll('div[lang]');
    divs.forEach(div => div.classList.toggle('hidden', div.lang === lang));
  })
  btn.click()
})

.hidden {
  display: none;
}

<button type="button" id="swap" data-lang="gb_EN">Switch Text</button>

<div class="content">
      <div lang="gb_EN">
        <h1>Welcome</h1>
        <p>English text</p>
      </div>
      <div lang="se_SV" class="hidden">
        <h1>Vällkommen</h1>
        <p>Svensk tekst</p>
      </div>
      <div lang="gb_EN">
        <h1>Welcome</h1>
        <p>English text</p>
      </div>
      <div lang="se_SV" class="hidden">
        <h1>Vällkommen</h1>
        <p>Svensk tekst</p>
      </div>
    </div>

Answer 2

Remember to properly implement the use of the lang attribute
Utilize classList.toggle for efficient toggling

This script should be added to all pages where the language is set to any of the specified languages.

Adjust the lang attribute as needed. Update lang="en"/lang="sv" in the script accordingly

Uncomment the lines with localStorage and eliminate the line: let savedLang = "se_SV"; from your site

window.addEventListener("DOMContentLoaded", () => {
  //let savedLang = localStorage.getItem("lang") || "gb_EN";
  let savedLang = "se_SV";
  const btn = document.getElementById("swap");
  btn.dataset.lang = savedLang;

  btn.addEventListener("click", (e) => {
    const tgt = e.target;
    let lang = tgt.dataset.lang;
    lang = lang === "gb_EN" ? "se_SV" : "gb_EN";
    tgt.dataset.lang = lang;
    // localStorage.setItem("lang",lang);
    const divs = document.querySelectorAll('div[lang]');
    divs.forEach(div => div.classList.toggle('hidden', div.lang === lang));
  })
  btn.click()
})

.hidden {
  display: none;
}

<button type="button" id="swap" data-lang="gb_EN">Switch Text</button>

<div class="content">
      <div lang="gb_EN">
        <h1>Welcome</h1>
        <p>English text</p>
      </div>
      <div lang="se_SV" class="hidden">
        <h1>Vällkommen</h1>
        <p>Svensk tekst</p>
      </div>
      <div lang="gb_EN">
        <h1>Welcome</h1>
        <p>English text</p>
      </div>
      <div lang="se_SV" class="hidden">
        <h1>Vällkommen</h1>
        <p>Svensk tekst</p>
      </div>
    </div>

Answer 3

Answer №2

[Edit 2023/04/24]

After some reflection, it seems that utilizing CSS to present the relevant content based on the lang attribute of the body could be the most efficient approach. Below is a simple code snippet demonstrating this concept.

For a demonstration of using the code with localStorage, refer to this Stackblitz snippet.

loadLanguage( {
  switchBtn: document.querySelector(`#langSwitch`),
  first: `sv-SE`, 
  second: `en-GB`} );

function loadLanguage( { switchBtn, first, second } ) {
  let currentLang; // currentLang not necessary with localStorage
  const store = {
    get current() { return currentLang ?? first; },
    set current(value) { document.body.lang = currentLang = value; } };
  const toggleLang = lang => 
    store.current = lang ?? (store.current === first ? second : first);
  switchBtn.addEventListener(`click`, () => toggleLang());
  toggleLang(store.current);
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

body[lang="en-GB"] [lang="sv-SE"] {
  display: none;
}


body[lang="sv-SE"] [lang="en-GB"] {
  display: none;
}

body[lang="en-GB"] [lang="en-GB"] {
  display: initial;
}

body[lang="sv-SE"] [lang="sv-SE"] {
  display: initial;
}


body[lang="sv-SE"] #langSwitch:after {
  content: 'Switch to english';
  margin-left: 36px;
}

body[lang="en-GB"] #langSwitch:after {
  content: 'Byta till svenska';
  margin-left: 36px;
}

body[lang="sv-SE"] #langSwitch {
  background: url(https://upload.wikimedia.org/wikipedia/commons/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg) no-repeat 6px center;
  background-size: 32px;
}

body[lang="en-GB"] #langSwitch {
  background: url(https://upload.wikimedia.org/wikipedia/commons/4/4c/Flag_of_Sweden.svg) no-repeat 6px center;
  background-size: 32px;
  border: none;
}

#langSwitch {
  display: initial;
  border: none;
  padding: 8px;
  box-shadow: -2px -2px 4px #aaa inset;
  border-radius: 3px;
}

#langSwitch:hover {
  box-shadow: 2px 2px 4px #aaa inset;
}

button {
  margin-bottom: 0.5rem;
}

<button id="langSwitch" lang="sv-SE"></button>
<div lang="en-GB">
  <h1>Welcome</h1>
  <p>English text</p>
</div>

<div lang="sv-SE">
  <h1>Vällkommen</h1>
  <p>Svensk tekst</p>
</div>

Answer 4

[Edit 2023/04/24]

After some reflection, it seems that utilizing CSS to present the relevant content based on the lang attribute of the body could be the most efficient approach. Below is a simple code snippet demonstrating this concept.

For a demonstration of using the code with localStorage, refer to this Stackblitz snippet.

loadLanguage( {
  switchBtn: document.querySelector(`#langSwitch`),
  first: `sv-SE`, 
  second: `en-GB`} );

function loadLanguage( { switchBtn, first, second } ) {
  let currentLang; // currentLang not necessary with localStorage
  const store = {
    get current() { return currentLang ?? first; },
    set current(value) { document.body.lang = currentLang = value; } };
  const toggleLang = lang => 
    store.current = lang ?? (store.current === first ? second : first);
  switchBtn.addEventListener(`click`, () => toggleLang());
  toggleLang(store.current);
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

body[lang="en-GB"] [lang="sv-SE"] {
  display: none;
}


body[lang="sv-SE"] [lang="en-GB"] {
  display: none;
}

body[lang="en-GB"] [lang="en-GB"] {
  display: initial;
}

body[lang="sv-SE"] [lang="sv-SE"] {
  display: initial;
}


body[lang="sv-SE"] #langSwitch:after {
  content: 'Switch to english';
  margin-left: 36px;
}

body[lang="en-GB"] #langSwitch:after {
  content: 'Byta till svenska';
  margin-left: 36px;
}

body[lang="sv-SE"] #langSwitch {
  background: url(https://upload.wikimedia.org/wikipedia/commons/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg) no-repeat 6px center;
  background-size: 32px;
}

body[lang="en-GB"] #langSwitch {
  background: url(https://upload.wikimedia.org/wikipedia/commons/4/4c/Flag_of_Sweden.svg) no-repeat 6px center;
  background-size: 32px;
  border: none;
}

#langSwitch {
  display: initial;
  border: none;
  padding: 8px;
  box-shadow: -2px -2px 4px #aaa inset;
  border-radius: 3px;
}

#langSwitch:hover {
  box-shadow: 2px 2px 4px #aaa inset;
}

button {
  margin-bottom: 0.5rem;
}

<button id="langSwitch" lang="sv-SE"></button>
<div lang="en-GB">
  <h1>Welcome</h1>
  <p>English text</p>
</div>

<div lang="sv-SE">
  <h1>Vällkommen</h1>
  <p>Svensk tekst</p>
</div>

What is the most efficient way to substitute text within an HTML document?

Answer №1

Answer №2

Similar questions

What are the steps to create a JSON file structured in a tree format?

Display various components using a dropdown selection

Experiencing a missing handlebars helper error when utilizing a helper within partials in express-handlebars

Issue with Next.js: Setting the width to 100vh prevents the height from being responsive on mobile devices

Managing numerous invocations of an asynchronous function

Ways to streamline the directives for conciseness?

PHP Header Redirect Not Redirecting Correctly

The function forEach is unable to handle the process of uploading multiple images to cloudinary

Personalized AngularJS required text

Ways in which the user can modify the city name within this inquiry

What is the best way to handle newline characters ( ) when retrieving text files using AJAX?

Manipulating State in React: How to add a property to an object within an array within a component's state

Guide to establishing intricate conditions for TypeORM insertion

When implementing `useRouter().push()` in Next.js, it has the ability to refresh

What could be causing the unresponsive hamburger button on my navbar?

Retrieving information from the backend using JavaScript

What's the best way to implement asynchronous state updating in React and Redux?

Error: Vue.js is unable to find the reference for "_vm.KisanData" and throws a TypeError

How can I iterate through a directory containing files and extract the exported JavaScript object from each one?

Encountered the error message "A property 'split' cannot be read of undefined" while attempting to run a React Native application