如何在具有"display:flex and justify-content:space-between"样式的节点中包装部分文本? [英] How to wrap part of the text in a node that has 'display: flex and justify-content: space-between' styling?

问题描述

我目前正在编写一个Firefox扩展程序，该扩展程序使用模糊搜索对网页上的高亮单词进行修饰.

I am currently writing a Firefox extension that uses fuzzy search to highligth words on a web page.

突出显示是通过创建一个包含匹配项的范围，然后将该范围的内容包装在自定义元素周围来完成的.在我看来，这种方法等效于拆分文本节点的文本并将其手动复制到新创建的节点.

The highlighting is done by creating a range that contains the match, then wrapping the content of the range around a custom element. This method from my perspective is equivalent to splitting the text node's text and copying it manually to a newly created node.

该插件的预发行版本运行良好，但是我无法处理一种类型的CSS样式: display:flex;证明内容:之间的空格.这里的问题是，当我部分包装以这种方式设置样式的节点的内容时，呈现的文本将失去完整性.

The pre-release version of the add-on works beautifully, however there's one type of css styling that I cannot deal with: display: flex; justify-content: space-between. The issue here is that when I partially wrap the content of a node styled as such, the rendered text loses its integrity.

下面您可以找到一个简单的演示.您可以看到，格式化开始后1秒钟，第一段间隔了，而第二段则保持不变.

Below you can find a simple demonstration. You can see that after 1 sec when the formatting starts, the 1st paragraph gets spaced out, while the 2nd one remains intact.

有人可以为这个问题提出解决方案/解决方法吗?我想保持网页的CSS完整无缺，因此修改元素的样式就不成问题了.我已经检查过 mark.js API，它也无法处理这种情况.我想知道浏览器的内置ctrl-f Highlight All搜索栏如何处理此问题.

Could someone suggest a solution/workaround to this problem? I'd like to leave the web page's css intact so modifying the element's style is out of the question. I have checked mark.js API and it cannot handle this situation either. I wonder how the browser's built-in ctrl-f Highlight All searchbar deals with this..

function wrapRange(range){
  const markedNode = document.createElement('mark');
  range.surroundContents(markedNode);
}

setTimeout(() => { 
  document.querySelectorAll('p').forEach(node => {
    const range = new Range();
    range.setStart(node.firstChild, 0);
    range.setEnd(node.firstChild, 3);
    wrapRange(range);
  });
}, 1000);

.problematicClass {
  display: flex;
  justify-content: space-between;
}
mark {
  background-color: red;
}

<p class="problematicClass">Lorem ipsum</p>
<p>Lorem ipsum</p>

推荐答案

Flex始终负责自我布局和子布局.如果您不希望子节点受父级弹性设置的影响，则必须在子节点周围添加包装器(即使它们是文本节点).

Flex is always responsible for self- and child-layouts. You have to add a wrapper around the child-nodes (even if they are text-nodes), if you don't want them to be affected by the parents flex-settings.

该规范描述了针对用户界面设计优化的CSS盒模型.在flex布局模型中，flex容器的子项可以在任何方向上进行布局，并且可以伸缩"其大小，既可以增长以填充未使用的空间，也可以收缩以防止父项溢出.儿童的水平和垂直对齐都可以轻松操纵.这些框的嵌套(水平内部垂直或水平内部垂直)可用于构建二维布局.

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

来源: https://drafts.c​​sswg.org/css-flexbox-1/

浏览器在完全不同的级别上标记了搜索中的突出显示(CTRL + F)，并且不会注入html代码.

The browser marks the highlight from the search (CTRL+F) on a completely different level and does not inject html code.

您可以使用Selection API来解决您要执行的操作，但是请记住，只有Firefox一次支持多个选择范围.

That what you want to do, can be solved with the Selection API, but keep in mind, that only Firefox supports multiple selection-ranges at once.

在此处查看示例: https://developer.mozilla.org/zh-CN/docs/Web/API/Selection/addRange#Result

• Firefox: https://i.imgur.com/DnhZJ5y.png
• Webkit浏览器: https://i.imgur.com/sfKriEl.png

这篇关于如何在具有"display:flex and justify-content:space-between"样式的节点中包装部分文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！