javascript – 如何突出显示与CKeditor中正则表达式匹配的元素？

我想要能够突出显示(即,用颜色或其他方式包装一个跨度)与CKEditor中正则表达式匹配的所有文本.我可能会添加一个按钮来执行此操作,并按一下按钮来删除突出显示.我的具体用例是突出显示我的 HTML模板中的所有的胡塞变量(使得很容易看到哪里有胡塞变量).

我实现了一个版本,我用一个span替换正则表达式匹配的胡须,然后是捕获组.当我测试时,这似乎打破了一些模板.

要删除突出显示,我使用editor.removeStyle,这在所有情况下似乎都不起作用.

这是我实现的一个例子：

editor.addCommand( 'highlightMustache',{
            exec: function( editor ) {
                editor.focus();
                editor.document.$.execCommand( 'SelectAll',false,null );
                var mustacheRegex = /{{\s?([^}]*)\s?}}/g;
                var data = editor.getData().replace(mustacheRegex,'<span style="background-color: #FFFF00">{{ $1 }}</span>');
                editor.setData( data );
            }
        });

        // command to unhighlight mustache parameters
        editor.addCommand( 'unhighlightMustache',null );
                var style = new CKEDITOR.style( { element:'span',styles: { 'background-color': '#FFFF00' },type:CKEDITOR.STYLE_INLINE,alwaysRemoveElement:1 } );
                editor.removeStyle( style );
                editor.getSelection().removeAllRanges();
            }
        });

谢谢！

解决方法

以下方法对我来说有一个类似的任务：

>走CKEditor文档的DOM树,并将所有text nodes组合成一个字符串(我们称之为S).使用CKEDITOR.dom.walker,this answer应该在这里帮助.在树上行走时,建立数据结构集合(我们称之为C),以存储每个文本节点对象及其文本在S内的位置.
>运行你的正则表达式对S.
>如果没有找到匹配,停止.
>否则,使用C集合,找到起始文本节点(让我们称之为SN),并在其内部偏移,对应于S中匹配字符串的起始字符位置.
>使用C集合,找到最终文本节点(我们称之为EN),对应于S内匹配字符串的结束字符位置.
>创建一个CKEDITOR.dom.range对象并将其定位为SN作为开始,EN作为结束(startContainer / startOffset / endContainer / endOffset).
>使用CKEDITOR.dom.selection.selectRanges()选择上一步的范围.