Question

我希望在出现单词“Sinux”（不区分大小写）时更改特定文本的颜色应格式为粗体和红色。我只能绑定我的代码在

下面的值

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

Answer 1

我更改了上面的代码并能够在视点区域中突出显示单词。但问题是在我的文本框区域，我必须从第二行写，然后我的着作是在第一行显示。我的问题是我想从文本区域的顶部开始写作，文字应该在下面而不是上面显示。

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

使用AngularJS动态更改文本绑定的颜色

1 个答案: