使用strong标签高亮输入建议匹配项时相邻空格消失问题如何解决

我正在开发可展示联想建议结果的输入框组件，需要将用户输入的值作为子串在每个建议结果中高亮显示。
例如用户输入cat时，建议结果中会高亮显示category。
我目前的实现方式是给匹配段包裹strong标签，代码如下：

content.innerHTML = `${arr[x].substr(0, index)}<strong>${arr[x].substr(index, match.length)}</strong>${arr[x].substr(index+match.length)}`

我遇到的问题是：如果匹配内容和空格相邻时，该空格会消失。例如输入tes，渲染结果为This is a<strong>tes</strong>t，原句中的空格丢失。
我查看HTML源码确认空格是存在的，控制台打印的字符串也完全正常，所以怀疑这个问题和strong标签有关？

排查与解决方法 #

• 优先排查CSS样式问题
  检查<strong>标签、内容容器元素及其父元素的样式：
  1. 是否给<strong>设置了负的margin-left/margin-right，刚好覆盖了相邻的空格
  2. 内容容器是否设置了white-space: collapse等会合并空白的属性，部分场景下浏览器会默认合并不同标签之间的连续空白
  3. 如果建议项使用了Flex/Grid布局，检查是否设置了过小的宽度或者flex-shrink属性为非0值，导致内容被挤压时空白被优先压缩
• 字符串处理层面规避
  如果确认样式无问题，可以在拼接HTML前先把原字符串里的所有空白字符替换为HTML非换行空格实体，避免浏览器自动合并空白：

  // 先处理原字符串，把普通空格转为 避免被合并
  const processedItem = arr[x].replace(/\s/g, ' ')
  content.innerHTML = `${processedItem.substr(0, index)}<strong>${processedItem.substr(index, match.length)}</strong>${processedItem.substr(index+match.length)}`
  

• 框架规则排查
  如果你在Vue/React等框架项目中使用该代码，部分框架默认会合并模板中的连续空白，你可以给当前内容元素添加框架提供的跳过编译标记（如Vue的v-pre指令），避免框架自动处理元素内的内容。

内容的提问来源于stack exchange，提问作者NickW