如果regExp！匹配，则包裹/删除textarea值周围的范围

Question

我希望看到here的相同功能。

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

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

如果匹配，那么＆＃34;荧光笔＆＃34;中的那个元素将不会有任何跨度。 div，否则它将被包裹在＆＃34; span＆＃34;因此以红色突出显示。

最佳方法？

模板：

<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之间将发生偏移”：