Word Formatting Checker that allows users check the formatting of the first three words.You can adapt it to check additional properties (e.g., font color, italics) or extend it to handle more complex scenarios.

gistfile1.txt

name: Basic API call (JavaScript)
description: Performs a basic Word API call using plain JavaScript & Promises.
host: WORD
api_set: {}
script:
  content: >
    document.getElementById("checkFormatting").addEventListener("click", async
    function() {
      await Word.run(async (context) => {
        const paragraph = context.document.body.paragraphs.getFirst();
        const paragraphRange = paragraph.getRange();

        const textRanges = paragraphRange.getTextRanges([" "], true);
        textRanges.load("items"); // Load items so we can use them
        await context.sync(); //after load proxy objects
        if (textRanges.items.length < 3) {
          console.log("Not enough word ranges available.");
          return;
        }
        const firstThree = textRanges.items.slice(0, 3);

        firstThree[0].font.load("bold");
        firstThree[1].font.load("underline");
        firstThree[2].font.load("size");

        await context.sync();

        // Get formatting values
        const firstWordBold = firstThree[0].font.bold;
        const secondWordUnderline = firstThree[1].font.underline;
        const thirdWordSize = firstThree[2].font.size;

        // Display results
        document.getElementById("results").innerHTML = `
                        <p>First word is <strong>${firstWordBold ? "bold" : "not bold"}</strong>.</p>
                        <p>Second word is <strong>${
                          secondWordUnderline !== "None" ? "underlined" : "not underlined"
                        }</strong>.</p>
                        <p>Font size of the third word is <strong>${thirdWordSize}</strong> pt.</p>
                    `;
      }).catch((error) => {
        console.error("Error: ", error);
      });
    });
  language: typescript
template:
  content: "<div class=\"container\">\n\t<h1>Word Formatting Checker</h1>\n\n\t<p>Click the button below to check the formatting of the first three words in your Word document.</p>\n\t<button id=\"checkFormatting\" class=\"btn\">Check Formatting</button>\n\t<div id=\"results\" class=\"result\">\n\t\t<!-- Results will be displayed here -->\n\t</div>\n</div>"
  language: html
style:
  content: |-
    .container {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }
    .btn {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #0078D4;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 20px;
    }
    .btn:hover {
      background-color: #005A9E;
    }
    .result {
      margin-top: 20px;
      font-size: 18px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css

  [email protected]/client/core.min.js
  @types/core-js

  [email protected]
  @types/[email protected]