Retrieve the individual character styles within an element using JavaScript

Question

Retrieve the individual character styles within an element using JavaScript

I'm currently dealing with a dynamically created div that features styled characters like:

<div>Hello <b>J</b>oe</div>

and my goal is to identify which characters are styled (in this case, the letter J).

I've already attempted using window.getComputedStyle() but I haven't been able to extract the style character by character.

Here's a larger example:

<div id="testing">H<b>i</b> I <b>a</b>m b<b>o</b>b</div>

Expected output: getDivStyle("testing") =>

H: false
i: true

I: false

a: true
m: false

B: false
o: true
b: false

Thank you in advance for your assistance!

javascript html css

Answer 1

Answer №1

To highlight only certain elements, you can follow this approach:

HTML:

<div id="my-div">Hello <b>J</b>oe</div>

JavaScript:

console.log(document.getElementById("my-div").querySelectorAll("b"));

This code snippet retrieves and logs all the <b> elements within the specified div.
However, if you want to target more than just bolded elements, you can do so by specifying all the element tags you want to include like this:

HTML:

<div id="my-div"><i>Hello</i> <b>J</b>oe</div>

JavaScript:

console.log(document.getElementById("my-div").querySelectorAll("b"), document.getElementById("my-div").querySelectorAll("i"));

Answer 2

To highlight only certain elements, you can follow this approach:

HTML:

<div id="my-div">Hello <b>J</b>oe</div>

JavaScript:

console.log(document.getElementById("my-div").querySelectorAll("b"));

This code snippet retrieves and logs all the <b> elements within the specified div.
However, if you want to target more than just bolded elements, you can do so by specifying all the element tags you want to include like this:

HTML:

<div id="my-div"><i>Hello</i> <b>J</b>oe</div>

JavaScript:

console.log(document.getElementById("my-div").querySelectorAll("b"), document.getElementById("my-div").querySelectorAll("i"));

Answer 3

Answer №2

Inspect the child nodes to analyze their text, type, and node value. By breaking it down into characters, you can easily manipulate the data.

const nodes = document.querySelector("#testing").childNodes;
nodes.forEach(node => {
  console.log(node.textContent, node.nodeType === Node.ELEMENT_NODE, node.nodeName);
});

<div id="testing">H<b>i</b> I <b>a</b>m b<b>o</b>b</div>

To obtain the desired output:

const nodes = document.querySelector("#testing").childNodes;
const result = Array.from(nodes).flatMap(node => {
  const isElem = node.nodeType === Node.ELEMENT_NODE;  
  return Array.from(node.textContent).map(char => char === ' ' ? '' : `${char}: ${isElem}`);
});

console.log(result.join("\n"));

<div id="testing">H<b>i</b> I <b>a</b>m b<b>o</b>b</div>

Answer 4

Inspect the child nodes to analyze their text, type, and node value. By breaking it down into characters, you can easily manipulate the data.

const nodes = document.querySelector("#testing").childNodes;
nodes.forEach(node => {
  console.log(node.textContent, node.nodeType === Node.ELEMENT_NODE, node.nodeName);
});

<div id="testing">H<b>i</b> I <b>a</b>m b<b>o</b>b</div>

To obtain the desired output:

const nodes = document.querySelector("#testing").childNodes;
const result = Array.from(nodes).flatMap(node => {
  const isElem = node.nodeType === Node.ELEMENT_NODE;  
  return Array.from(node.textContent).map(char => char === ' ' ? '' : `${char}: ${isElem}`);
});

console.log(result.join("\n"));

<div id="testing">H<b>i</b> I <b>a</b>m b<b>o</b>b</div>

Answer 5

Answer №3

To collect information about the characters in an element and their parent elements, iterate through the child nodes recursively. Once you have gathered this data, you can then determine which elements are considered "styled" and convert them into boolean values.

Here is a comprehensive example that can handle nested elements and allows for customization of what constitutes a "styled" element:

View Code in TypeScript Playground

/** @returns an array of [character, parent element] */
function createTextMapping(element, memo = []) {
  for (const node of element.childNodes) {
    switch (node.nodeType) {
      case Node.TEXT_NODE: {
        for (const str of node.data) {
          memo.push([str, element]);
        }
        break;
      }
      case Node.ELEMENT_NODE: {
        createTextMapping(node, memo);
        break;
      }
      default: throw new Error("Unexpected node type");
    }
  }
  return memo;
}

// Define which elemnet tag names are considered "styled":
const styledElementTagNames = new Set([
  "B",
  "EM",
  "I",
  "STRONG",
  // etc.
]);

const targetElement = document.getElementById("testing");

const mapping = createTextMapping(targetElement);

const results = mapping
  .filter(([str]) => str.trim().length > 0) // Remove whitespace
  .map(([str, elm]) => [str, styledElementTagNames.has(elm.tagName)]); // Validate parent elements

for (const [str, valid] of results) {
  console.log(`${str}:`, valid);
}

body { font-family: sans-serif; }

<div id="testing">H<b>i</b> I <b>a</b>m b<b>o</b>b</div>

Answer 6

To collect information about the characters in an element and their parent elements, iterate through the child nodes recursively. Once you have gathered this data, you can then determine which elements are considered "styled" and convert them into boolean values.

Here is a comprehensive example that can handle nested elements and allows for customization of what constitutes a "styled" element:

View Code in TypeScript Playground

/** @returns an array of [character, parent element] */
function createTextMapping(element, memo = []) {
  for (const node of element.childNodes) {
    switch (node.nodeType) {
      case Node.TEXT_NODE: {
        for (const str of node.data) {
          memo.push([str, element]);
        }
        break;
      }
      case Node.ELEMENT_NODE: {
        createTextMapping(node, memo);
        break;
      }
      default: throw new Error("Unexpected node type");
    }
  }
  return memo;
}

// Define which elemnet tag names are considered "styled":
const styledElementTagNames = new Set([
  "B",
  "EM",
  "I",
  "STRONG",
  // etc.
]);

const targetElement = document.getElementById("testing");

const mapping = createTextMapping(targetElement);

const results = mapping
  .filter(([str]) => str.trim().length > 0) // Remove whitespace
  .map(([str, elm]) => [str, styledElementTagNames.has(elm.tagName)]); // Validate parent elements

for (const [str, valid] of results) {
  console.log(`${str}:`, valid);
}

body { font-family: sans-serif; }

<div id="testing">H<b>i</b> I <b>a</b>m b<b>o</b>b</div>

Retrieve the individual character styles within an element using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to change the font size in HTML?

Executing a function within the same file is referred to as intra-file testing

Unable to adjust image opacity using jQuery

Bundling and minifying Angular2 assets

What is the best way to increase the height of a div up to a specific point before allowing it to scroll?

Exploring the jungle. Cursor acting strange while dragging

Showing the loading screen while waiting for the static Next.js app to load

jQ identifying children with particular styling attributes

Values in Local Storage are not located upon first attempt, but after a reload they function properly

Header element not keeping the navbar at the bottom

Is it possible to divide a column in an HTML table into two separate

Navigation through dots on a single page

Having trouble resolving a component from a component library while utilizing NPM link

Issue with Firebase Cloud function not terminating despite receiving a 204 response code

Applying a translucent layer of color to a jpeg image to create a subtle background effect

Delay the next loop iteration until receiving an HTTP request

If the number exceeds 1, then proceed with this action

Are there any open source libraries in jQuery or HTML that can be used for creating av

Steps for Adding a JSON Array into an Object in Angular

Having difficulties injecting a Service into a TypeScript Controller