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();
            }
        });

谢谢！