javascript - 如何在 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>