如何语法突出显示单个文本输入字段? [英] How can I syntax highlight a single text input field?

问题描述

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

基于Java的代码编辑器庞大且肿-我不希望多行编辑，行号或类似内容.只是一种简单的方法，可以解析输入的文本并允许对其进行格式设置.

例如，如果用户正在创建消息模板，并且具有名为 firstName 和 lastName 的令牌，并且存在HTML单行输入字段(如果有)他们输入:

 您好，{{firstName}} {{lastName}}！ 

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

解决方案

好吧，我创建了一个函数，该函数在 [...] 内部时突出显示单词，我进行了调整为您提供服务，然后获取 {{......}} 中的内容.

但是问题在于，您无法在输入字段中设置HTML，因此无法以简单的方式在输入或文本区域内突出显示单词，需要将突出显示的文本添加到另一种元素中./p>

对此的一种可能的解决方案是将 div 与 contentEditable = true 一起使用，因此在同一输入中键入和突出显示可能会更容易./p>

如果要查找的是下面的代码(我是根据简单的输入而不是contentEditable div编写的).

 函数setHighlight(input){让newText = Highlight(input.value);document.getElementById("result").innerHTML = newText;}功能突出显示(文本){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 +}}";如果(htmlText.indexOf(attr)> -1){htmlText = htmlText.replace(attr，< span class ='highlight'>" + attr +</span>"));}}}}返回htmlText;}  

  input {宽度:320像素；高度:40px；}.强调{font-weight:粗体;颜色:#14e；}  

 <输入id ="txt" oninput ="setHighlight(this)" value =在此处输入{{token}};< div id ="result"></div>  

在这里，我做了一个contentEditable，看来您正在寻找什么:

 函数setHighlight(inputSpan){让newText = Highlight(inputSpan.textContent);inputSpan.innerHTML = newText;setCaretToEnd(inputSpan);}功能突出显示(文本){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 +}}";如果(htmlText.indexOf(attr)> -1){htmlText = htmlText.replace(attr，< span class ='highlight'>" + attr +</span>"));}}}}返回htmlText;}函数setCaretToEnd(elem){让范围= document.createRange();range.selectNodeContents(elem);range.collapse(false);让selection = window.getSelection();selection.removeAllRanges();selection.addRange(range);}  

  #txt {宽度:320像素；高度:30px；填充:4px；边框:1px实线#777；显示:块；border-radius:4px;颜色:#222;}.强调{font-weight:粗体;颜色:#14e；}  

 < span id ="txt" contentEditable ="true" oninput ="setHighlight(this)">输入{{token}}这里</span>  

How can I best syntax highlight a single text area, with extremely simple highlighting rules?

Javascript-based code editors are huge and bloated - I don't want multi-line editing, line numbers, or anything like that. Just something simple that parses inputted text and allows formatting on it.

For example, if the user is creating a message template and has tokens available called firstName and lastName, and there is an HTML single-line input field available, if they type:

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

What would be the best method to apply styling (colors, borders, etc) to the well-defined tokens, while still allowing the user to edit the entire string of text?

解决方案

Well, I have a function that I created that highlight words when it is inside [...], I made an adjustment for you and then it gets what is inside {{...}}.

But the problem is that, you can't set HTML in an input field, so you can't highlight words in a simple way inside inputs or textareas, you need to add the highlited text to another kind of element.

A possible solution to that, would be to have a div with contentEditable=true, so maybe it will be easier to type and highlight in the same input.

Look the below code (where I made based on a simple input, not contentEditable div) if it is what you are looking for.

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>

And here, I did with a contentEditable, it seems more what are you looking for:

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>

这篇关于如何语法突出显示单个文本输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！