Search for word and color it

问题

I am trying to search for a word in iframe and color it using angularjs and jquery. For jquery code i took help from @andrew stackoverflow. In Jquery code if condition is there, controller is not going inside if condition. please help me to solve the problem.

Here is my complete code, which contains angular code and jquery code.

Angular code is working just fine, in the console i am able to see all the consoles, first i am parsing the arrays and taking out only the string required to search in the jquery. After that i am using that search word to search in the the iframe. But i am facing some problem with the jquery code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html ng-app="app">

<head>
  <title>
    <%=t itle %>
  </title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>

 <div ng-controller="ToddlerCtrl">
   <h2>Sample</h2>
 </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


  <iframe src="text.txt" id="myIframe"></iframe>

<script type="text/javascript">
  var myApp = angular.module('app', []);

myApp.controller('ToddlerCtrl', function($scope) {

  // Define an array of Toddler objects
  $scope.toddlers = [
    [100, ["sample"]],
    [100, ["used"]],
    [100, ["tag"]],
    [33.33333333333334, ["file"]]
  ];

  for (var key in $scope.toddlers) {

    if ($scope.toddlers.hasOwnProperty(key)) {

      var temp = JSON.stringify($scope.toddlers[key][1])
      var final_string = temp.slice(2, -2);
      var searchWord = final_string;
      // console.log(searchWord)

      $(document).ready(function() {
        $('#myIframe').ready(function() {

          var $html = $($('#myIframe').contents().find('body').html());
          if ($html.contents().text().search(searchWord) != -1) {
            // Some problem with the if condition i guess.
            // Controller is not entering if condition.
            var replaceWith = "<span style='color:red'>" + searchWord + "</span>"
            var newHTML = $html.text().replace(searchWord, replaceWith);
            $('#myIframe').contents().find('body').html(newHTML);
          }
        });
      });
      // alert($scope.toddlers[key][1]);
      // console.log("searchWord")
    }
  }


});

回答1:

You can do it easily with Jquery, you can use this function on Javascript:

function findAndColorWord(html, word, color){
    var indexWordStart = html.indexOf(word);
    var wordLength = word.length;
    var coloredWord = '<span style="color: '+color+'">'+word+'</span>';

    var firstHtmlPart = html.substring(0, indexWordStart - 1);
    var secondHtmlPart = html.substring(indexWordStart + wordLength, html.length - 1);

    return firstHtmlPart + coloredWord + secondHtmlPart;
}

You only need to get the position of the word in the html of the iframe, that you can get with $("#id-of the iframe")[0].outerHTML , and after insert in that position a span element with the colored style for the word.

I maked a basic example with a Div that works in the same way that with an a iframe, you can see the example here:

https://jsfiddle.net/9zt976uz/2/#&togetherjs=nQoh3LINQG

来源：https://stackoverflow.com/questions/46881808/search-for-word-and-color-it

标签

javascript

jquery

html

angularjs

iframe