動態更改與AngularJS綁定的文本的顏色

-1

我想更改「Sinux」（不區分大小寫）的單詞時出現在視點中的特定文本的顏色應該用粗體和紅色格式化。我只是能夠綁定我的代碼的值低於動態更改與AngularJS綁定的文本的顏色

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="myCtrl"> 
<h3>Write Someting in the below input area </h3> 
Text Area: <input ng-model="name"> 
<h1>{{name}}</h1> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.name = "Please enter your text input"; 
}); 
</script> 


</body> 
</html>

來源

2016-12-10 Hasan Mosharrof

請解釋什麼解決方案，你已經嘗試過第一。 – niconoe

我更改了上面的代碼，並且能夠在視點區域突出顯示單詞。但是問題出在我的文本框區域，我必須從第二行寫出，然後我的作品在第一行顯示。我的問題是我想從文本區域的頂部寫入，文字應該在下面而不是上面顯示。 –

我改變了上面的代碼，並能夠在視點區域突出顯示單詞。但是問題出在我的文本框區域，我必須從第二行寫出，然後我的作品在第一行顯示。我的問題是我想從文本區域頂部寫入，文字應該在下面而不是上面顯示。

的index.html文件

<!DOCTYPE html> 
<html> 

    <head> 
    <style type="text/css"> 
     .textarea { 
    font-family: arial; 
    font-size: 12px; 
    border: 0; 
    padding: 0; 
    width: 700px; 
    height: 200px; 
} 

.realTextarea { 
    margin: 0; 
    background: transparent; 
    position: absolute; 
    z-index: 999; 
} 

.overlayTextarea { 
    margin: 0; 
    position: absolute; 
    top: 1; 
    left: 1; 
    z-index: 998; 
} 

.textareaBorder { 
    border: groove 1px #ccc; 
    position: relative; 
    width: 702px; 
    height: 202px; 
} 

.highlight { 
    background: red; 
} 
    </style> 
    </head> 
    <div class="textarea textareaBorder"> 
     <textarea id="myTextarea" onkeyup="doit();" class="textarea realTextarea"></textarea> 
     <div id="myOtherTextarea"></div> 
    </div> 
    <script type="text/javascript" src="app.js"></script> 
    </body> 
</html>

app.js文件

var _terms = ['Sinux']; 

function preg_quote(str) { 
    return (str + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1"); 
} 

function doit() { 
    var s = myTextarea.value; 

    for (i = 0; i < _terms.length; i++) 
    s = s.replace(new RegExp(preg_quote(_terms[i]), 'gi'), '<span class="highlight">' + _terms[i] + '</span>'); 

    myOtherTextarea.innerHTML = s.replace(new RegExp(preg_quote('\r'), 'gi'), '<br>'); 
}

來源

2016-12-11 11:22:40

動態更改與AngularJS綁定的文本的顏色

回答

相關問題