Javascript 如何在具有'；显示：调整和调整内容：在'；造型？

我目前正在编写一个Firefox扩展，它使用模糊搜索在网页上突出单词

高亮显示是通过创建一个包含匹配项的区域，然后将该区域的内容环绕在自定义元素周围来完成的。从我的角度来看，这种方法相当于拆分文本节点的文本并手动将其复制到新创建的节点

该插件的预发布版本工作得非常出色，但是有一种css样式我无法处理：

display:flex；对齐内容：之间的空格

。这里的问题是，当我将一个节点的内容部分包装为这样的样式时，呈现的文本将失去其完整性

下面是一个简单的演示。您可以看到，在格式化开始的1秒后，第一段被隔开，而第二段保持不变

有人能提出解决这个问题的方法吗？我希望网页的css保持不变，因此修改元素的样式是不可能的。我已经检查了API，它也不能处理这种情况。我想知道浏览器内置的ctrl-f Highlight All searchbar如何处理这个问题

函数包装（范围）{
const markedNode=document.createElement（'mark'）；
range.surroundContents（markedNode）；
}
setTimeout（（）=>{
document.querySelectorAll（'p'）.forEach（节点=>{
常数范围=新范围（）；
range.setStart（node.firstChild，0）；
range.setEnd（node.firstChild，3）；
牧马人（范围）；
});
}, 1000);
.problematicsclass{
显示器：flex；
证明内容：之间的空间；
}
标记{
背景色：红色；
}
Lorem ipsum

你能修改html吗？是否需要使用
problematicsclass
将原始文本保留在元素中？
简单的解决方法是将文本块包装在ex.
中。您可以修改html吗？是否需要使用
problematicsclass
将原始文本保留在元素中？
简单的解决方案是将文本块包装在ex中。
Flex始终负责自身和子布局。如果不希望子节点受父节点flex设置的影响，则必须在其周围添加包装器（即使它们是文本节点）

该规范描述了为用户界面设计而优化的CSS框模型。在flex布局模型中，flex容器的子容器可以在任何方向上进行布局，并且可以“调整”其大小，可以增大以填充未使用的空间，也可以缩小以避免父容器溢出。孩子们的水平和垂直排列都很容易操纵。这些框的嵌套（水平内垂直或垂直内水平）可用于构建二维布局

资料来源：

浏览器在完全不同的级别上标记来自搜索的突出显示（CTRL+F），并且不插入html代码

您想要做的事情可以通过SelectionAPI解决，但请记住，只有Firefox一次支持多个选择范围

请查看此处的示例：


火狐：
Webkit浏览器：
Flex始终负责自身和子布局。如果不希望子节点受父节点flex设置的影响，则必须在其周围添加包装器（即使它们是文本节点）

该规范描述了为用户界面设计而优化的CSS框模型。在flex布局模型中，flex容器的子容器可以在任何方向上进行布局，并且可以“调整”其大小，可以增大以填充未使用的空间，也可以缩小以避免父容器溢出。孩子们的水平和垂直排列都很容易操纵。这些框的嵌套（水平内垂直或垂直内水平）可用于构建二维布局

资料来源：

浏览器在完全不同的级别上标记来自搜索的突出显示（CTRL+F），并且不插入html代码

您想要做的事情可以通过SelectionAPI解决，但请记住，只有Firefox一次支持多个选择范围

请查看此处的示例：


火狐：
Webkit浏览器：
Hi@Ogochi-我可以，是的，我确实想保留原始文本。这个解决方案确实有效，但是我会接受上面的答案，因为这是对我问题的更详细的回答。谢谢Hi@Ogochi-我可以，是的，我确实想保留原始文本。这个解决方案确实有效，但是我会接受上面的答案，因为这是对我问题的更详细的回答。谢谢你好@Christopher-谢谢你的深入解释。我有点不愿意将页面上的每一个文本节点包装成一个文件，因为我担心它可能会以某种方式扭曲页面——幸运的是它没有。这似乎是唯一可以采取的方法。当加载DOM内容以获取所有文本节点并将它们包装在一个文件中时，我触发一个事件。在此之后，我的代码将无缝执行。另外，感谢您对不支持多选的webkit浏览器的介绍。在某种程度上，我想让插件与主流浏览器兼容。嗨@Christopher-谢谢你的深入解释。我有点不愿意将页面上的每一个文本节点包装成一个文件，因为我担心它可能会以某种方式扭曲页面——幸运的是它没有。这似乎是唯一可以采取的方法。当加载DOM内容以获取所有文本节点并将它们包装在一个文件中时，我触发一个事件。在此之后，我的代码将无缝执行。另外，感谢您对不支持多选的webkit浏览器的介绍。在某种程度上，我想让插件与主流浏览器兼容。