如果 regExp !match 围绕文本区域值包装/删除跨度

Question

我想要与here 相同的功能。

我需要一个指令来循环显示在 textare/highlighter 中的数组，并比较该值是否与以下 regExp（整数、浮点数和科学记数法正负值）匹配：

/-?\d+[\.,]?\d*[eE]?-?\d*/g

如果匹配，则“highlighter” div 中的该元素周围将没有跨度，否则它将被包裹在“跨度”中，因此以红色突出显示。

最佳方法？

模板：

<script type="text/ng-template" id="form_field_float">
  <div>
    <div class="highlighter" id="mirror">
      <p ng-repeat=" x in dbo.attributes[attobj.name]"><span>{{ x }}</span></p>
    </div>
    <textarea id="textarea" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list="&#10;" ng-trim="false"></textarea>
  </div>
</script>

CSS：

  .highlighter, #textarea {
      width: 400px;
      height: 300px;
      font-size: 10pt;
      font-family: 'verdana';
  }

  .highlighter p {
      font-size: 10pt;
      font-family: 'verdana';
      margin:0 0 0 0;
  }


  .highlighter {
      position: absolute;
      padding: 1px;
      margin-left: 1px;
      color: white;

  }

  .highlighter span {

      color: red;
      background: red;
      opacity:.4;
  }

  #textarea {
      position: relative;
      background-color: transparent;
  }

Answer 1

好吧，我的大脑终于转过来并找到了解决方案：

模板：

<script type="text/ng-template" id="form_field_float">
  <div spellcheck="false">
    <div class="highlighter" id="mirror">
      <div ng-repeat=" x in dbo.attributes[attobj.name] track by $index" ng-controller="textVal">
        <div ng-if="!check(x)"><span>{{ x }}</span></div>
        <div ng-if="check(x)">{{ x }}</div>
      </div>
    </div>
    <textarea id="textarea" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list="&#10;" ng-trim="false"></textarea>
  </div>
</script>

控制器：

   app.controller('textVal', ['$scope',
        function ($scope) {      
             $scope.check = function(valueToCheck){
                if(!isNaN(valueToCheck)){
                  return true;
                } else{ return false;}
             }
        }
   ]);

CSS：

  .highlighter, #textarea {
      width: 100%; 
  }



  .highlighter {
      position: absolute;
      padding: 1px;
      margin-left: 1px;
      color: white;

  }

  .highlighter span {

      color: red;
      background: red;
      opacity:.4;
  }

  #textarea {
      position: relative;
      background-color: transparent;
  }

仍然有一个问题也许有人可以给我一个很好的干净的解决方案!!!： “如果按回车，没有输入任何值，再次按回车，textarea值和highlighter-div之间会出现偏移”：