Question 180205 in Html Question posted in
Some basic documentation can be found here.

How do I turn all text on an HTML page into a single string while keeping the CSS?

How do I turn all the text in a page into a single string of characters, keeping all the CSS?

Suppose I have a page like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Document</title>
  </head>
  <body>
    <h1>This is some text</h1>
    <h2>This is some smaller text</h2>
    <h3>This is even smaller text</h3>
  </body>
  <script>
  // put the code here
  </script>
</html>

I want to turn all the text into a single string, for example, the letter "A".
How do I do that?

I tried running document.body.innerText = "A", but the entire page only turned into a single "A".
I was expecting the whole page’s text to be filled with A’s, but only one "A" actually rendered.

Tags:

3

Answers


  1. 0

    This code selects all elements in the body of the HTML document using document.body.getElementsByTagName("*"). Then, it loops through each element and replaces its inner text with the letter "A" repeated for the length of the original inner text. This is likely a test or demonstration of manipulating the DOM using JavaScript. Hope it helps you!

        var elements = document.body.getElementsByTagName("*");
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var characterCount = element.innerText.length;
      element.innerText = "A".repeat(characterCount);
    }
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Document</title>
  </head>
  <body>
    <h1>This is some text</h1>
    <h2>This is some smaller text</h2>
    <h3>This is even smaller text</h3>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    Loop through all the elements on the page. If the element only contains a single text node, then it’s a leaf element with text. Replace its text with A.

    document.querySelectorAll("*").forEach(el => {
  if (el.childNodes.length == 1 && el.childNodes[0].nodeType == Node.TEXT_NODE) {
    el.innerText = 'A';
  }
})
    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>My Document</title>
</head>

<body>
  <div>
    <h1>This is some text</h1>
    <h2>This is some smaller text</h2>
    <h3>This is even smaller text</h3>
  </div>
</body>

</html>
    Login or Signup to reply.
  3. 0

    you can use JS and implement something like like

    // Get the root element of the HTML document
var rootElement = document.documentElement;

// Function to recursively traverse the DOM and extract text content
function extractTextFromElement(element) {
  var text = '';

  // If the element is a text node, concatenate its content
  if (element.nodeType === Node.TEXT_NODE) {
    text += element.textContent.trim();
  }
  // If the element has child nodes, recursively extract text from each child
  else if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0) {
    for (var i = 0; i < element.childNodes.length; i++) {
      text += extractTextFromElement(element.childNodes[i]);
    }
  }

  return text;
}

// Call the function with the root element
var extractedText = extractTextFromElement(rootElement);

// Print the extracted text as a single string
console.log(extractedText);
// Get the root element of the HTML document
var rootElement = document.documentElement;

// Function to recursively traverse the DOM and extract text content
function extractTextFromElement(element) {
  var text = '';

  // If the element is a text node, concatenate its content
  if (element.nodeType === Node.TEXT_NODE) {
    text += element.textContent.trim();
  }
  // If the element has child nodes, recursively extract text from each child
  else if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0) {
    for (var i = 0; i < element.childNodes.length; i++) {
      text += extractTextFromElement(element.childNodes[i]);
    }
  }

  return text;
}

// Call the function with the root element
var extractedText = extractTextFromElement(rootElement);

// Print the extracted text as a single string
console.log(extractedText);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search