What is the best way to mix up all the characters within the content of an HTML document?

Question

What is the best way to mix up all the characters within the content of an HTML document?

<div id="contentContainer">
    <h1>First Page</h1>
    <section id="mainSection">
        <p>Lorem ipsum dolor sit amet</p>
        <ul>
            <li><a href="#">Black world</a></li>
            <li><a href="#">White world</a></li>
            <li><a href="#">666 world</a></li>
        </ul>
    </section>
</div>
<button id="changeTextContent">Change Text</button>

function modifyContent() {
    var content = document.getElementById("contentContainer").innerText;

    var newContent = "";
    var alphabet = "abcdefghijklmnopqrstuvwxyz";
    var upperAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var numbers = "0123456789";

    function isLowercase(char) {
        return char >= "a" && char <= "z";
    }

    function isUppercase(char) {
        return char >= "A" && char <= "Z";
    }

    function isNumber(char) {
        return char >= "0" && char <= "9";
    }   

    for (var i = 0; i < content.length; i++) {
        if (isLowercase(content.charAt(i))) {
            newContent += alphabet[Math.floor(Math.random() * alphabet.length)];
        }
        else if (isUppercase(content.charAt(i))) {
            newContent += upperAlphabet[Math.floor(Math.random() * alphabet.length)];
        }
        else if (isNumber(content.charAt(i))) {
            newContent += numbers[Math.floor(Math.random() * numbers.length)];
        }
        else {
            newContent += content.charAt(i);
        }
    }
    for (var j = 0; j < content.length; j++) {
        content = content.replace(content[j], newContent[j]);
    }

    document.getElementById("contentContainer").innerText = content;
}

I am looking to create a JavaScript function that will randomly change every character inside the #contentContainer without affecting its style. This function should be triggered by clicking on the #changeTextContent button. I have tried writing a function for this purpose but it's not working as expected. Any assistance would be greatly appreciated.

javascript dom

Answer 1

Answer №1

(function(){
      var characters = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
      var unfilteredElements = document.querySelectorAll('#contents *');
      var filteredElements = [].filter.call(unfilteredElements, function(element){ return !element.children.length; });
      var button = document.querySelector('#randomText');
      button.onclick = shuffleText;
      
      function shuffleText(){
        for(var i = filteredElements.length-1; i > -1; i--){
            var text = filteredElements[i].innerText;
            for(var j = text.length-1; j > -1; j--){
              var randomChar = getRandomCharacter();
              text = text.replace(text[j], randomChar);
            }
            filteredElements[i].innerText = text;
          }    
      }
        
      function getRandomCharacter(){
          var length = characters.length-1;
          var index = Math.floor(Math.random() * (length));
          return characters[index];
      }
    })();

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS Playground</title>
</head>
<body style='padding:5px;'>
  <div id="contents">
    <h1>Lorem Ipsum</h1>
    <section id="sectionOne">
        <p>Testing Text</p>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
        </ul>
    </section>
</div>
<button id="randomText">Shuffle Text</button>
</body>
</html>

Answer 2

(function(){
      var characters = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
      var unfilteredElements = document.querySelectorAll('#contents *');
      var filteredElements = [].filter.call(unfilteredElements, function(element){ return !element.children.length; });
      var button = document.querySelector('#randomText');
      button.onclick = shuffleText;
      
      function shuffleText(){
        for(var i = filteredElements.length-1; i > -1; i--){
            var text = filteredElements[i].innerText;
            for(var j = text.length-1; j > -1; j--){
              var randomChar = getRandomCharacter();
              text = text.replace(text[j], randomChar);
            }
            filteredElements[i].innerText = text;
          }    
      }
        
      function getRandomCharacter(){
          var length = characters.length-1;
          var index = Math.floor(Math.random() * (length));
          return characters[index];
      }
    })();

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS Playground</title>
</head>
<body style='padding:5px;'>
  <div id="contents">
    <h1>Lorem Ipsum</h1>
    <section id="sectionOne">
        <p>Testing Text</p>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
        </ul>
    </section>
</div>
<button id="randomText">Shuffle Text</button>
</body>
</html>

Answer 3

Answer №2

Utilizing the treewalker api, this method efficiently locates all text nodes:

UPDATE: Added reset example. UPDATE: Excluded characters that are not in the alphabet.

function getAllTextNodes(node){
  var currentNode, nodes = [];
  var treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, 
    { acceptNode: function(node) {
      if(/\S/.test(node.data)) return NodeFilter.FILTER_ACCEPT;
    }}, false);
  while(currentNode = treeWalker.nextNode()) nodes.push(currentNode);
  return nodes;
}

function randomIndex(array) {
    return Math.floor(Math.random() * array.length);
}

function createRandomChar(char) {
  var lower = "abcdefghijklmnopqrstuvwxyz";
  var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  var number = "0123456789";
  if((lower+upper+number).indexOf(char) < 0) return char;
  if(!isNaN(parseInt(char))) return number[randomIndex(number)];
  if(char === char.toLowerCase()) return lower[randomIndex(lower)];
  if(char === char.toUpperCase()) return upper[randomIndex(upper)];
  return char;
}

function randomizeContent(selector) {
    var element = document.querySelector(selector);
    var textNodes = getAllTextNodes(element);
    textNodes.forEach(function(node) {   
      node.textContent = node.textContent.split('').map(function(char) {
        return createRandomChar(char);
      }).join('');
    });
}

// example code
function reset(nodes, originalNodes) {
  nodes.forEach(function(node, index) {
    node.textContent = originalNodes[index] && originalNodes[index].textContent
  });
}

var contentSelector = '#contents';
var contentElement = document.querySelector(contentSelector);
var originalNodes = getAllTextNodes(contentElement).map(function(node) {
  return node.cloneNode();
});

document.querySelector('#randomText').addEventListener('click', function(e) {
  randomizeContent(contentSelector);
});

document.querySelector('#resetRandomText').addEventListener('click', function(e) {
  reset(getAllTextNodes(contentElement), originalNodes);
});

<div id="contents">
    <h1>Article I</h1>
    <section id="sectionOne">
        <p>Hello World</p>
        <ul>
            <li><a href="#">Black world</a></li>
            <li><a href="#">White world</a></li>
            <li><a href="#">666 world</a></li>
        </ul>
    </section>
    <section>
      <p>
      A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
      </p>
    </section>
</div>
<button id="randomText">Random Text</button>
<button id="resetRandomText">reset</button>

Answer 4

Utilizing the treewalker api, this method efficiently locates all text nodes:

UPDATE: Added reset example. UPDATE: Excluded characters that are not in the alphabet.

function getAllTextNodes(node){
  var currentNode, nodes = [];
  var treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, 
    { acceptNode: function(node) {
      if(/\S/.test(node.data)) return NodeFilter.FILTER_ACCEPT;
    }}, false);
  while(currentNode = treeWalker.nextNode()) nodes.push(currentNode);
  return nodes;
}

function randomIndex(array) {
    return Math.floor(Math.random() * array.length);
}

function createRandomChar(char) {
  var lower = "abcdefghijklmnopqrstuvwxyz";
  var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  var number = "0123456789";
  if((lower+upper+number).indexOf(char) < 0) return char;
  if(!isNaN(parseInt(char))) return number[randomIndex(number)];
  if(char === char.toLowerCase()) return lower[randomIndex(lower)];
  if(char === char.toUpperCase()) return upper[randomIndex(upper)];
  return char;
}

function randomizeContent(selector) {
    var element = document.querySelector(selector);
    var textNodes = getAllTextNodes(element);
    textNodes.forEach(function(node) {   
      node.textContent = node.textContent.split('').map(function(char) {
        return createRandomChar(char);
      }).join('');
    });
}

// example code
function reset(nodes, originalNodes) {
  nodes.forEach(function(node, index) {
    node.textContent = originalNodes[index] && originalNodes[index].textContent
  });
}

var contentSelector = '#contents';
var contentElement = document.querySelector(contentSelector);
var originalNodes = getAllTextNodes(contentElement).map(function(node) {
  return node.cloneNode();
});

document.querySelector('#randomText').addEventListener('click', function(e) {
  randomizeContent(contentSelector);
});

document.querySelector('#resetRandomText').addEventListener('click', function(e) {
  reset(getAllTextNodes(contentElement), originalNodes);
});

<div id="contents">
    <h1>Article I</h1>
    <section id="sectionOne">
        <p>Hello World</p>
        <ul>
            <li><a href="#">Black world</a></li>
            <li><a href="#">White world</a></li>
            <li><a href="#">666 world</a></li>
        </ul>
    </section>
    <section>
      <p>
      A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
      </p>
    </section>
</div>
<button id="randomText">Random Text</button>
<button id="resetRandomText">reset</button>

What is the best way to mix up all the characters within the content of an HTML document?

Answer №1

Answer №2

Similar questions

Absolute positioning causes an element's height to increase

Using Javascript to upload an image and show it in a small display

Implementing restriction measures for deterring harmful conduct within ExpressJS

Managing DOM elements within a Vue 3 template using Typescript

automatically created button, form control named 'answer' that is not valid

Dynamic linked selection

When using jQuery AJAX, the script is returning blank values

What's the best way to transfer a variable from a PHP file to a jQuery AJAX file so that it can be used as the URL parameter when sending

Arrange a JavaScript map based on its values and ensure that a specific field index remains at the top position

Downloading Files from Mongodb Using GridFS

Next.js, Knex, and SWR: Unusual issue disrupting queries

Issue when sending PHP Papa Parse object through AJAX

Include a CSS file from an external JavaScript file

Utilizing separate JavaScript files in Bootstrap 5: A guide to implementation

The Bootstrap validator triggers the form submission only after the second click

What prevents me from extending an Express Request Type?

What is the best way to redirect a user to a different URL in Express while also sending additional data along with the request

Retrieve data from an AJAX call and PHP script upon successful completion

Interested in creating a Twitter bot that can automatically share images from a designated folder in sequential order. Leveraging the power of node.js

Incorporate JSON when adding a new row to the database using Ruby On Rails