如何獲取和替換CodeMirror中雙花括號內的文本

Question

我想創建一個輸入，用戶只能寫純文本，但我可以在那里獲得該文本的一部分並用一些HTML替換它。

所以，例如，我想將像Lorem Ipsum {{dolor}}這樣的文本轉換為Lorem Ipsum <some html with data from JS object>

我有一個帶有一些數據的對象。

var data = {
    dolor: {
        icon: 'https://placehold.it/16x16/',
        text: 'Dolor text'
    }
}

我想用它來獲取自定義文本和圖像，因此{{dolor}}應轉換為類似的內容

<span class="image">
    <img src="https://placehold.it/16x16/">
    Dolor text
</span>

我的方法是使用CodeMirror，定義一個新模式並檢測花括號，但現在我不知道如何獲取這些大括號之間的內容，我不知道如何修改輸出的HTML（因為CodeMirror只添加了一個cm-NameOfMode文本的CSS類）。

這就是我所擁有的

 var data = { dolor: { icon: 'https://placehold.it/16x16/', text: 'Dolor text' } } CodeMirror.defineMode( 'uoVariable', function( config, parserConfig ){ var uoVariable = { token: function( stream, state ){ var character; // console.log( state.inString ); if ( stream.match( '{{' ) ){ while ( ( character = stream.next() ) != null ){ if ( character == '}' && stream.next() == '}' ){ stream.eat( '}' ); return 'uoVariable'; } } } while ( stream.next() != null && ! stream.match( '{{', false ) ){} return null; } }; return CodeMirror.overlayMode( CodeMirror.getMode( config, parserConfig.backdrop ), uoVariable ); }); $(document).ready(function(){ // Do for each one let form__variable_cd_mirror = document.getElementById( 'form-variable__cd-text' ), form__variable_cd = document.getElementById( 'form-variable__cd' ); let editor = CodeMirror( form__variable_cd, { mode: 'uoVariable', value: form__variable_cd_mirror.innerText, lineWrapping: true, scrollbarStyle: null, extraKeys: { Tab: function( cm ){ return false; }, }, }).on( 'beforeChange', function( cm, changeObj ){ // Typed new line var typedNewLine = changeObj.origin == '+input' && typeof changeObj.text == 'object' && changeObj.text.join('') == ''; if ( typedNewLine ){ return changeObj.cancel(); } // Pasted new line var pastedNewLine = changeObj.origin == 'paste' && typeof changeObj.text == 'object' && changeObj.text.length > 1; if ( pastedNewLine ) { var newText = changeObj.text.join(' '); return changeObj.update( null, null, [ newText ] ); } return null; }); }); 

 body { font-size: 15px; font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* New CSS */ #form-variable__cd .CodeMirror { padding: 8px 12px; transition: all 150ms ease-in-out; border-radius: 3px; border: 1px solid #cdcdcd; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); outline: none; height: auto; font-size: 15px; font-family: inherit !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: 10px; } #form-variable__cd .cm-uoVariable { background: #4f4f4f; color: #fff; padding: 2px 5px; border-radius: 3px; white-space: nowrap; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/addon/mode/overlay.js"></script> <div id="form-variable__cd-text" style="display: none">Lorem ipsum {{dolor}}</div> <div id="form-variable__cd"></div> 

所以...關於如何存檔的任何想法？

謝謝！

Answer 1

我不是CodeMirror的用戶，但我已經使用HTML模板。

這是一種方法：

1. 標記包含模板的所有元素（以避免完全掃描DOM）
2. 將所有{{key}}與data對象中的鍵匹配以生成HTML
3. 直接在模板中替換innerHTML ，或者替換為單獨的元素（如果以后要從模板重新生成）

您可以通過以下簡單方式完成以下操作：

 var data = { dolor: { icon: 'https://placehold.it/16x16/', text: 'Dolor text' }, lorem: { text: 'Lorem text' } }; function getHtmlFromData(dataitem) { var html = ''; if ('icon' in dataitem) // Image data type html += '<span class="image">' + '<img src="' + dataitem.icon + '">' + dataitem.text + '</span>'; else // Text data type html += '<span class="text">' + dataitem.text + '</span>'; return html; } setTimeout( function () { var templates = document.getElementsByClassName("template"); Array.prototype.forEach.call(templates, function (template) { for (var key in data) { template.innerHTML = template.innerHTML.replace( new RegExp('{{'+key+'}}', 'g'), getHtmlFromData(data[key]) ); } }); }, 1000 ); 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="index.jsx"></script> </head> <body> <div class="template"> {{lorem}} Ipsum {{dolor}} </div> </body> </html>