如何语法突出显示单个文本输入字段？

Question

如何使用极其简单的突出显示规则最好地语法突出显示单个文本区域？

基于

Javascript 的代码编辑器庞大而臃肿——我不想要多行编辑、行号或类似的东西。只是一些简单的东西，可以解析输入的文本并允许对其进行格式化。

例如，如果用户正在创建消息模板并且有可用的标记 firstName 和 lastName，并且有一个 HTML 单行输入字段可用，如果他们输入：

Hello, {{firstName}} {{lastName}}!

将样式（颜色、边框等）应用于定义明确的标记，同时仍允许用户编辑整个文本字符串的最佳方法是什么？

Answer 1

好吧，我创建了一个功能，当它在 [...] 里面时，它会突出显示单词，我为你做了一个调整，然后它得到里面的内容 {{...}}。

但问题是，你不能在输入框里设置HTML，所以你不能在inputs或者textareas中用简单的方式高亮单词，你需要将高亮文本添加到另一种元素。

一个可能的解决方案是使用 div 和 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>

如何语法突出显示单个文本输入字段？

How can I syntax highlight a single text input field?

html

javascript

syntax-highlighting

input

token