草庐IT

javascript - 如何在 CodeMirror 中获取和替换双花括号内的文本

coder 2024-07-15 原文

我想创建一个输入，用户只能在其中输入纯文本，但我可以在其中获取部分文本并将其替换为一些 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>

那么...关于如何归档这个有什么想法吗？

谢谢!

最佳答案

我不是 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>

关于javascript - 如何在 CodeMirror 中获取和替换双花括号内的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50730197/

何在javascript39codesectioncodemirror

有关javascript - 如何在 CodeMirror 中获取和替换双花括号内的文本的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  5. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  6. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  7. ruby 正则表达式 - 如何替换字符串中匹配项的第 n 个实例 - 2

    在我的应用程序中，我需要能够找到所有数字子字符串，然后扫描每个子字符串，找到第一个匹配范围(例如5到15之间)的子字符串，并将该实例替换为另一个字符串“X”。我的测试字符串s="1foo100bar10gee1"我的初始模式是1个或多个数字的任何字符串，例如，re=Regexp.new(/\d+/)matches=s.scan(re)给出["1","100","10","1"]如果我想用“X”替换第N个匹配项，并且只替换第N个匹配项，我该怎么做？例如，如果我想替换第三个匹配项“10”(匹配项[2])，我不能只说s[matches[2]]="X"因为它做了两次替换“1fooX0barXg

  8. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  9. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  10. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行？ - 2

    这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式ruby​​shell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

随机推荐