How to make a part of a string bold?

the tasks below shall be completed using Web Document API functions and using neither the innerHTML nor the innerText property.

I want to bold just the violation part of the string in str3.

The only things I can find are using innerHTML which isn’t allowed.

Here is my JavaScript code:

// Find the placeholder node in the HTML document
const div0 = document.getElementById("part0");

// Create a new H2 and its text
const h0: HTMLHeadingElement = document.createElement("h2");
const h0text: Text = document.createTextNode("Part 0");
h0.appendChild(h0text);
div0?.appendChild(h0);

// Create a paragraph as its text
const par0: HTMLParagraphElement = document.createElement("p");
var str1 = ("Random");
var str2 = (" Random");
var str3 = ("someone else is a violation of academic honesty.");
var bold1 = ["violation"];


const par0text: Text = document.createTextNode(str1 
    + str2 
    + str3);
par0.appendChild(par0text);
div0?.appendChild(par0);

and here is my HTML code:

    <html>
  <head>
    <script src="./part0.ts" defer>
    </script>
    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
    <link rel="stylesheet" href="mystyle.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <div id="part0" class="result"></div>
    <script src="https://unpkg.com/chai/chai.js"></script>
    <script src="https://unpkg.com/chai-dom/chai-dom.js"></script>
    <script src="https://unpkg.com/mocha/mocha.js"></script>
    <script class="mocha-init">
      mocha.setup("bdd");
      mocha.checkLeaks();
    </script>
    <script src="./mocha-checker.ts"></script>
    <script class="mocha-exec">
      mocha.run();
    </script>
  </body>
</html>

18 thoughts on “How to make a part of a string bold?”

  1. using neither the innerHTML nor the innerText property

    Option 1: use insertAdjacentHTML.

    ok, ok… maybe this one goes against the spirit of the question
    😂.

    const div0 = document.getElementById("part0");
    
    const h0 = document.createElement("h2");
    const h0text = document.createTextNode("Part 0");
    h0.appendChild(h0text);
    div0?.appendChild(h0);
    
    // Create a paragraph as its text
    const par0 = document.createElement("p");
    var str1 = 'Random';
    var str2 = ' Random';
    var str3 = 'someone else is a violation of academic honesty.';
    var bold1 = ['violation'];
    
    let par0text = [str1, str2, str3].join(' ');
    bold1.forEach(item => {
      par0text = par0text.replace(item, `<strong>${item}</strong>`)
    });
    
    par0.insertAdjacentHTML('afterbegin', par0text);
    div0?.appendChild(par0);
    <div id="part0"></div>

    Option 2: Create a fragment with Range.createContextualFragment()

    const div0 = document.getElementById("part0");
    
    const h0 = document.createElement("h2");
    const h0text = document.createTextNode("Part 0");
    h0.appendChild(h0text);
    div0?.appendChild(h0);
    
    // Create a paragraph as its text
    const par0 = document.createElement("p");
    const str1 = 'Random';
    const str2 = ' Random';
    const str3 = 'someone else is a violation of academic honesty.';
    const bold1 = ['violation'];
    
    let par0text = [str1, str2, str3].join(' ');
    bold1.forEach(item => {
      par0text = par0text.replace(item, `<strong>${item}</strong>`)
    });
    
    const fragment = document.createRange().createContextualFragment(par0text);
    
    par0.appendChild(fragment);
    div0?.appendChild(par0);
    <div id="part0"></div>
    Reply

Leave a Comment