Есть ли способ динамически выделить определенные буквы в слове, не делая каждую букву отдельным элементом <span>?

Чтобы предотвратить добавление элемента span:

Вы можете использовать стиль CSS линейного градиента, чтобы выделить определенную последовательность букв. Измените приведенный ниже код в соответствии с вашими потребностями, поскольку вам может потребоваться выделить несколько вхождений букв в элементе span.

/* index.css */
/* this may be applied if you use <p> other than <span> to wrap your text
p {
    display: inline-block;
}

/* update: to ensure each letter has same width */
span {
    font-family: monospace;
}

 <input type = "text" id = "searchInput" placeholder = "Type to highlight">
  <div id = "wordContainer">
    <span>banana</span>
    <span>cat</span>
    <span>baby</span>
    <span>ball</span>
    <span>candy</span>
  </div>

<script>
function highlightWords() {
  const searchInput = document.getElementById("searchInput").value.toLowerCase();
  const spans = document.querySelectorAll("#word-container span");

  spans.forEach((span) => {
    const word = span.textContent.toLowerCase();
    const wordLength = word.length;
    const inputLength = searchInput.length;

    // Find the start and end index of the search input within the word
    const startIndex = word.indexOf(searchInput);
    const endIndex = startIndex + inputLength;

    if (startIndex !== -1 && searchInput.length > 0) {
      const startPercentage = (startIndex / wordLength) * 100;
      const endPercentage = (endIndex / wordLength) * 100;

      // Apply the gradient background
      span.style.background = `linear-gradient(
        to right,
        white 0%,
        white ${startPercentage}%,
        yellow ${startPercentage}%,
        yellow ${endPercentage}%,
        white ${endPercentage}%,
        white 100%
      )`;
    } else {
      span.style.background = "none"; // Reset background if no match
    }
  });
}
</script>

Вы можете получить текст и ввод, а затем разделить текст на слова, используя Split() , затем перебрать этот массив и проверить, имеет ли значение BeginsWith() любую строку, которую ввод передает во время входного eventListener. Поместив логику в метод карты, вы можете переформатировать искомую строку и объединить оставшуюся часть слова, используя substring() или splice() . Присоединяйтесь к сопоставленному массиву, а затем присвойте элементам innerHTML вновь отформатированную строку с помощью highlight класса.

Дополнительные комментарии см. во фрагменте кода.

// define variables for the elements in HTML
const par = document.querySelector('#text');
const input = document.querySelector('#matchText');

// callback passing in the event
const searchtext = e => {
  // define the input value toLowerCase
  const searchText = e.target.value.toLowerCase();
  // get the text content of the element you wish to search through
  const textCont = par.textContent;

  // split the text into words using a whitespace
  const words = textCont.split(' ');

  // iterate over the words with map and define word
  const highlightedText = words.map(word => {

    // check and see if the word startWith the searchText string
    if (word.toLowerCase().startsWith(searchText) && searchText !== '') {

      // return the formatted string of the word 
      // with the letters highlighted using substring
      return `<span class = "highlight">${word.substring(0, searchText.length)}</span><span>${word.substring(searchText.length, word.length)}</span>`;
    }

    // return the non-matching words in teh original string
    return word;

    // create a string with the array values using .join()
  }).join(' ');

  // set the innerHTML to the new string containing the highlighted string
  par.innerHTML = highlightedText;
}

// eventListener using an input event, pass the callback
input.addEventListener('input', searchtext);

.highlight {
  background-color: yellow;
}

<p id = "text">
  <span>Banana</span>
  <span>ball</span>
  <span>ballistic</span>
  <span>cat</span>
  <span>chat</span>
  <span>change</span>
  <span>chap</span>
  <span>character</span>
  <span>color</span>
  <span>people</span>
  <span>peel</span>
  <span>peon</span>
</p>
<input type = "text" id = "matchText" name = "matchingText">

Может быть, вам нужно следующее? Он также будет выделять буквы или группы букв в середине слов:

// define variables for the elements in HTML
const words = document.querySelectorAll('#text>span');
const input = document.getElementById('matchText');

input.addEventListener("input",()=>{
 const rx=new RegExp(input.value,"ig");

 words.forEach(w=>w.innerHTML=w.textContent.replace(rx,`<span class = "highlight">$&</span>`));
 
});


 

.highlight {
  background-color: yellow;
}

<p id = "text">
  <span>Banana</span>
  <span>ball</span>
  <span>ballistic</span>
  <span>cat</span>
  <span>chat</span>
  <span>change</span>
  <span>chap</span>
  <span>character</span>
  <span>color</span>
  <span>people</span>
  <span>peel</span>
  <span>peon</span>
</p>
<input type = "text" id = "matchText" name = "matchingText">

Обновлять

Внимательно прочитав вопрос, я подготовил приведенный выше фрагмент так, чтобы он находил введенные пользователем фрагменты в любом месте каждого слова. Комментарий ОП теперь ясно дал понять, что это было недоразумение, поэтому вот модифицированное решение, которое будет выделять буквы только в начале каждого слова:

// define variables for the elements in HTML
const words = document.querySelectorAll('#text>span');
const input = document.getElementById('matchText');

input.addEventListener("input",()=>{
 const rx=new RegExp("^"+input.value,"ig");

 words.forEach(w=>w.innerHTML=w.textContent.replace(rx,`<span class = "highlight">$&</span>`));
 
});


 

.highlight {
  background-color: yellow;
}

<p id = "text">
  <span>Banana</span>
  <span>ball</span>
  <span>ballistic</span>
  <span>cat</span>
  <span>chat</span>
  <span>change</span>
  <span>chap</span>
  <span>character</span>
  <span>color</span>
  <span>people</span>
  <span>peel</span>
  <span>peon</span>
</p>
<input type = "text" id = "matchText" name = "matchingText">

Изменение касается определения регулярного выражения rx:

const rx=new RegExp("^"+input.value,"ig");

Теперь он всегда начинается с ^, поэтому шаблон должен находиться в начале каждого <span>.