<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 讯享网
在我们的在线文档系统中，除了基础的富文本编辑能力外，搜索替换的算法同样也是重要的功能实现。纯文本搜索替换算法相对来说是比较容易实现的，而在富文本的场景中，由于存在图文混排、嵌入模块如等，实现这一功能则相对要复杂得不少。那么本文则以实现的富文本编辑器为基础，通过设计索引查找和图层渲染的方式来实现搜索替换。
首先我们先来思考一下纯文本的搜索替换算法，对于纯文本而言我们可以直接通过一些方法来查找对应文本的索引值，然后无论是将其直接替换还是切割再联合的方式，都可以轻松地完成这个功能。而富文本本质上可以看作是携带着格式的纯文本，那么在这种情况下我们依然可以延续着对于纯文本的处理思路，只不过由于存在文本会被切割为多个片段的问题，就需要我们来兼容这个数据层面上的问题。
实际上在前边我们强调了当前的实现是以为基础实现的方案，因为本质上搜索替换与数据结构的实现强相关，是扁平的数据结构，相对来说比较方便我们来处理这个问题。而如果是嵌套的数据结构类型例如的实现，我们仍然可以依照这个思路来实现，只不过在这里如果我们将其作为来实现并没有那么直观，嵌套的数据结构类型对于替换的处理上也会复杂很多。
那么在这里我们先来构造的编辑器实例，在我们实现的实例中，我们只需要引用的资源，然后指定实例化的节点即可初始化编辑器，我们在这里通过配置来注册了样式模块。文中的相关实现可以在中查看。
讯享网
在中是使用来描述富文本内容的，是一个扁平的数据结构，除了能描述富文本内容之外，还可以描述富文本内容的变更。在这里我们首先关注的是文档内容的描述，因此这里我们则是全部以的形式来描述，而之前我们也提到了富文本实际上就是纯文本携带属性，因此我们可以很轻松地使用下面的样式描述普通文本与加粗文本。
我们的搜索替换方案本质上是在数据描述的基础上来查找目标内容，而从上边的数据结构来看，我们可以明显地看出在上也可能存在需要查找的目标内容，例如我们需要实现组件，是可以在中存储信息来展示的信息，而置入的内容则是空占位，那么在这里我们就实现一下的插件。
讯享网
则此时我们的预置的数据结构内容则如下所示，我们可能注意到数据结构中的是对象并且实际内容是并不是在而是在中。这是因为在中描述的中是由存储的对象来完成的，因此在示例中我们查找的目标还是在对象中，但是并不实际影响我们需要对其进行额外的查找实现。
首先我们先来设计一下内容的搜索算法，既然前边我们已经提到了富文本实际上就是带属性的纯文本，那么我们就先来设想对于纯文本的搜索实现。文本搜索算法实现本质上就是字符串文本的匹配，那么我们很容易想到的就是算法，而实际上算法并不是最高效的实现算法，在各种文本编辑器中实现的查找功能更多的是使用的算法。
在这里我们先不考虑高效的算法实现，我们实现的目标则是在长文本中查找目标文本的索引值，因此可以直接使用对象的来实现查找。而我们实际上是需要获取目标文本的所有索引值，因此需要借助这个方法的第二个参数来实现查找的起始位置。而如果我们使用正则来实现索引则容易出现输入的字符串被处理为正则保留字的问题，例如搜索字符串时，则在不特殊处理的情况下会被认为搜索文本。
讯享网
在我们上述的测试中，可以将其放置于测试一下执行性能，将其分别实现防止于中测试，可以发现实际上的性能还会更高一些，因此在这里我们就直接使用来实现我们的搜索算法。在浏览器中测试万字文本的搜索，结果稳定在以内，性能表现是完全可以接受的，当然这个搜索结果和电脑本身的性能也是强相关的。
讯享网
那么此时我们就来处理关于的索引建立，那么由于富文本的表达存在样式信息，反映在数据结构上则是存在文本的片段，因此我们的搜索首先需要直接将所有文本拼接为长字符串，然后使用进行查找。此外在前边我们已经看到数据结构中存在，在这里我们需要将其作为不可搜索的文本占位，以避免在搜索时将其作为目标文本的一部分。
而对于类似于模块的结构处理则需要我们特殊处理，在这里不像是先前对于纯文本的内容搜索，我们不能将这部分的相关描述直接放置于中，因此此时我们将难以将其还原到原本的数据结构中，如果不能还原则无法将其显示为搜索的结果样式。那么我们就需要对再次进行迭代，然后地将需要处理的属性进行处理。
讯享网
当我们将所有的数据收集到起来后，就需要构建虚拟图层来展示搜索的结果。首先我们需要处理最初处理的纯文本的搜索结果，由于我们在输入的时候通常都是使用来输入搜索的文本目标，因此我们是不需要处理的情况，这里的图层处理是比较方便的。而具体的虚拟图层实现在先前的算法文章中已经描述得比较清晰，这里我们只实现相关的调用。
而在这里我们更需要关注的是的处理，因为在这里我们不能够使用来获取其相关的，因此这里我们需要自行计算其位置。因此我们此时需要取得所在的节点，然后通过构建对象，然后基于该获取，这样就取得了我们需要的和，但是需要注意的是，此时我们取得是绝对位置，还需要将其换算为编辑器实例的相对位置才可以。
讯享网
替换的实现在的结构上会比较简单，在先前我们也提到了不仅能够通过描述文档，还可以借助、、方法来描述文档的变更，那么我们需要做的就是在上述构造的的基础上，构造目标的变更描述。而由于我们先前构造的是不允许进行实质性的替换操作的，所以我们只需要关注原本的文本内容即可。
这里的实现重点是实现了批量的构造，首先需要定义实例，紧接着的是用来记录上一次执行过后的索引位置，在我们的循环中，是用来移动指针到当前即将处理的原文本内容，然后调用将其删除，之后的是替换的目标文本，注意此时的指针位置是在目标文本之后，因此需要将更新为当前处理的索引位置，最后将其应用到编辑器即可。
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/172757.html