Question

我是AngularJS（1.x）的初学者。我从plnkr那里获取了这段代码，但在这里我做了一些修改，即我删除了硬编码输入并单击了函数https://embed.plnkr.co/plunk/wtxZme

在下面提供的代码中需要以下方案

在文本框中输入一些文本，并需要在段落中突出显示输入的文本（黄色）。如果存在两个相同的单词，它应该在两个地方反映，而不使用正则表达式。

任何人都可以提供有关如何进行的任何想法吗？

aap.js

var app = angular.module('plunker', []);



app.controller('MainCtrl', function($scope) {

$scope.words ='';



$scope.text = "blah blah blah blah blah blahblah blah blah blah";



$scope.words = '';



});



  app.filter('highlightWord', function() {

  return function(text, words) {

  if(words) {

    var pattern = new RegExp(words);

    return text.replace(pattern, '<span class="highlighted">' + words 
     + '</span>');

  }

  else {

    return text;

  }

   };

的index.html

    <html ng-app="plunker">
    <head>
   <meta charset="utf-8" />

<title>AngularJS Plunker</title>

<script>document.write('<base href="' + document.location + '" />');</script>

<link rel="stylesheet" href="style.css" />

<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>

  <script src="app.js"></script>

  </head>



 <body ng-controller="MainCtrl">

   enter word:

<input type=text ng-model="words"><br>

Selected:

<div style="border: red thin solid; width: 100px; padding: 10px;" ng-
  bind-html-unsafe="text | highlightWord : words"></div>

</div>

Selected Word: {{words}}

的CSS / *把你的CSS放在这里* /

 .highlighted {
 background-color: yellow; 
  }

Answer 1

是的，你可以通过更新你的方法来做到这一点我的意思是您可以按要替换的单词拆分文本，并按更新的值

加入单词

app.filter('highlightWord', function() {

  return function(text, words) {

  if(words) {

  return text.split(words).join('<span class="highlighted">' + words + '</span>')

  }

  else {

    return text;

  }

   };

查看https://plnkr.co/edit/wtxZme?p=info

突出显示在文本框中输入的段落中的特定单词

1 个答案: