如果regExp！匹配，換行/去除textarea值的範圍

Question

我想要可以看到的相同功能here。

我需要循環顯示的textare /熒光筆內，並且如果該值以下的regexp（整數，浮點數和科學記數法正和負值）相匹配比較陣列上一個指令：

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

如果匹配，「highlighter」div中將沒有該元素的範圍，否則它將被包裹在「span」中，因此以紅色突出顯示。

最佳方法？

模板：

<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; 
    } 

還有一個ISSUE也許有人可以給我一個很好的清潔解!!!： 「如果輸入被按下，沒有輸入任何值並且再次按下輸入，則textarea val之間將發生偏移UE和熒光筆-DIV「：