How to make a part of a string bold?

by

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