Как сделать часть строки жирной?

приведенные ниже задачи должны выполняться с использованием функций API веб-документов и без использования свойства innerHTML или innerText.

Я хочу выделить только часть нарушения строки в str3.

Единственное, что я могу найти, это использование innerHTML, что не разрешено.

Вот мой код JavaScript:

// 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);

и вот мой HTML-код:

    <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>

javascript html bold
person Josue Nunez    schedule 18.02.2021    source источник
comment
Вы можете создать элемент document.createElement("STRONG"); и добавить к нему дочерний элемент или текст. Это чем-то похоже на то, как вы делали на H2   -  person MarLMazo    schedule 19.02.2021
comment
так что делать жирным шрифтом .createElement(Strong)? Это? Я понимаю, что могу добавить его к ребенку, но не уверен, как именно выделить эту конкретную строку жирным шрифтом.   -  person Josue Nunez    schedule 19.02.2021
comment
Почему такое странное требование? Я понимаю часть innerHTML, это хорошая идея, но какой смысл ограничивать вас в использовании последней, это домашнее задание (не то, чтобы мы были против этого здесь)?   -  person Oleg Valter    schedule 19.02.2021
comment
Кроме того, вы обязаны сначала добавить элемент, а затем затем выделить текст жирным шрифтом или нет? Потому что, если нет, вы можете разделить свою строку на совпадение и добавить 3 текстовых узла с самого начала.   -  person Oleg Valter    schedule 19.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

не используя ни свойство innerHTML, ни свойство innerText

Вариант 1: используйте insertAdjacentHTML.

ладно, ладно... может быть, это противоречит духу вопроса ????.

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>

Вариант 2. Создайте фрагмент с помощью 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>

person KevBot    schedule 19.02.2021