Как обернуть строки в HTML-теги с помощью JavaScript

let allText = document.querySelector('body p').textContent;
console.info(allText);
const outputElement = document.getElementById('output');
outputElement.textContent= ''; // empty the output

allText.split('\n').forEach(line => {
  // Create a container for the line
  const lineElement = document.createElement('div');
  // Split the line into parts by numbers, capturing the numbers to keep them in the result
  const parts = line.split(/(\d+)/);
  console.info(parts)
  parts.forEach(part => { 
    if (/\d+/.test(part)) {
      // wrap a number in a span
      const span = document.createElement('span');
      span.className = 'number';
      span.textContent = part;
      lineElement.appendChild(span);
    } else {
      lineElement.appendChild(document.createTextNode(part));
    }
  });
  outputElement.appendChild(lineElement);
});

.number {
  color: red;
}

/* stop console.info from hiding output */
.as-console-wrapper { height:40px !important;}

<p>
        sdfjsdf
        (1): sdfdsdfs --
        (1): sdfdsdfs --
        (2) sdfsdf --
        (3): sdfsdfs --
        sdfdsfsdf --
    </p>

<pre id = "output"></pre>

let allText = document.querySelector('body p').textContent;
console.info(allText);

document.getElementById('output').innerHTML = allText
  .replace(/\d+/g, match => `<span class = "number">${match}</span>`)

.number {
  color: red;
}


.as-console-wrapper { height:40px !important;}

<p>
        sdfjsdf
        (1): sdfdsdfs --
        (1): sdfdsdfs --
        (2) sdfsdf --
        (3): sdfsdfs --
        sdfdsfsdf --
    </p>

<pre id = "output"></pre>

// Find all the document's text nodes
const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
);

// Collect the text nodes into an array
const nodes = [];
while (treeWalker.nextNode()) {
  nodes.push(treeWalker.currentNode);
}

// Go through each text node...
for (const node of nodes) {
  const matches = [
    // Find each string of digits, adding them to an array...
    ...node.data.matchAll(/\d+/g)
    //  ...so that we can reverse them (we do this so our indexes
    //    don't become stale after we wrap the first text node)
  ].reverse();
  for (const match of matches) {
    // Create a range to include the sequence of digits
    const range = document.createRange();
    range.setStart(node, match.index);
    range.setEnd(node, match.index + match[0].length);
    // Create our wrapping element
    const newParent = document.createElement('b');
    // Surround the digits with our wrapping element
    range.surroundContents(newParent);
  }
}

<p>This text has 123 some numbers 456 including <i>nested 789</i>.</p>

body {
  font-family: 'open sans', sans-serif;
  font-size: 4vmin;
}


/** 
* display only numbers in lobtser 
* based on a compact subset
**/

@font-face {
  font-family: 'open sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=neILzCirqoswsqX9_oC0PJkDYqbBnEUpnRI&skey=7ed805a363b4659c&v=v30) format('woff2');
  unicode-range: U+30-39;
}

@font-face {
  font-family: 'open sans';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=neILzCirqoswsqX9_oC0PJkDYqbBnEUpnRI&skey=7ed805a363b4659c&v=v30) format('woff2');
  unicode-range: U+30-39;
}

@font-face {
  font-family: 'open sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=neILzCirqoswsqX9_oC0PJkDYqbBnEUpnRI&skey=7ed805a363b4659c&v=v30) format('woff2');
  unicode-range: U+30-39;
}

@font-face {
  font-family: 'open sans';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=neILzCirqoswsqX9_oC0PJkDYqbBnEUpnRI&skey=7ed805a363b4659c&v=v30) format('woff2');
  unicode-range: U+30-39;
}

<p>
  sdfjsdf
  <em>(1): sdfdsdfs --</em> (1): sdfdsdfs -- (2) sdfsdf --
  <strong>(3): sdfsdfs --</strong> sdfdsfsdf --
</p>