如何用极其简单的突出显示规则最好地语法突出显示单个文本区域？
基于Javascript的代码编辑器庞大且肿-我不需要多行编辑，行号或类似内容。只是一种简单的方法，可以解析输入的文本并允许对其进行格式设置。
例如，如果用户正在创建消息模板，并且具有称为firstName和的可用令牌lastName，并且输入以下内容，则存在HTML单行输入字段：
Hello, {{firstName}} {{lastName}}!
在仍允许用户编辑整个文本字符串的同时，将样式（颜色，边框等）应用于定义明确的标记的最佳方法是什么？
好吧，我有一个函数创建了，当它在里面时突出显示单词[...]，我为您进行了调整，然后得到里面的内容{{...}}。
但是问题在于，您无法在输入字段中设置HTML，因此无法以简单的方式在输入或文本区域内突出显示单词，需要将突出显示的文本添加到另一种元素中。
一个可能的解决方案是使用divwith contentEditable=true，因此在同一输入中键入和突出显示可能会更容易。
如果需要的话，请看下面的代码（我是根据简单的输入而不是contentEditable div编写的）。
function setHighlight(input){
let newText = Highlight(input.value);
document.getElementById("result").innerHTML = newText;
}
function Highlight(text){
var htmlText = text;
var attrs = htmlText.match(/\{{(.*?)\}}/g);
if (attrs != null) {
var stringAttrs = attrs.join(" ")
attrs = stringAttrs.replace(/}}/g, '').replace(/\{{/g, '').split(" ");
for (var i = 0; i < attrs.length; i++) {
var attr = attrs[i];
if (attr.length > 0) {
attr = "{{" + attr + "}}";
if (htmlText.indexOf(attr) > -1) {
htmlText = htmlText.replace(attr, "<span class='highlight'>" + attr + "</span>");
}
}
}
}
return htmlText;
}input{
width: 320px;
height: 40px;
}
.highlight{
font-weight: bold;
color: #14e;
}<input id="txt" oninput="setHighlight(this)" value="type a {{token}} here">
<div id="result"></div>在这里，我做了一个contentEditable，看来您正在寻找什么：
function setHighlight(inputSpan){
let newText = Highlight(inputSpan.textContent);
inputSpan.innerHTML = newText;
setCaretToEnd(inputSpan);
}
function Highlight(text){
var htmlText = text;
var attrs = htmlText.match(/\{{(.*?)\}}/g);
if (attrs != null) {
var stringAttrs = attrs.join(" ")
attrs = stringAttrs.replace(/}}/g, '').replace(/\{{/g, '').split(" ");
for (var i = 0; i < attrs.length; i++) {
var attr = attrs[i];
if (attr.length > 0) {
attr = "{{" + attr + "}}";
if (htmlText.indexOf(attr) > -1) {
htmlText = htmlText.replace(attr, "<span class='highlight'>" + attr + "</span>");
}
}
}
}
return htmlText;
}
function setCaretToEnd(elem){
let range = document.createRange();
range.selectNodeContents(elem);
range.collapse(false);
let selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}#txt{
width: 320px;
height: 30px;
padding: 4px;
border: 1px solid #777;
display: block;
border-radius: 4px;
color: #222;
}
.highlight{
font-weight: bold;
color: #14e;
}<span id="txt" contentEditable="true" oninput="setHighlight(this)">type a {{token}} here</span>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句