如何获取和替换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-NameOfModeCSS类到文本).

这就是我所拥有的

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对象中的键匹配all 以生成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>