搜索单词并为其着色答案

【问题标题】：Search for word and color it搜索单词并为其着色
【发布时间】：2018-04-03 13:20:29
【问题描述】：

我正在尝试在 iframe 中搜索一个单词并使用 angularjs 和 jquery 对其进行着色。对于 jquery 代码，我从 @andrew stackoverflow 那里得到了帮助。在 Jquery 代码中，如果条件存在，则控制器不会进入 if 条件。请帮我解决问题。

这是我的完整代码，其中包含 Angular 代码和 jquery 代码。

Angular 代码运行良好，在控制台中我可以看到所有控制台，首先我解析数组并仅取出在 jquery 中搜索所需的字符串。之后，我使用该搜索词在 iframe 中进行搜索。但是我在使用 jquery 代码时遇到了一些问题。

<!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")
    }
  }


});

【问题讨论】：

能否提供 iframe 的内容？
抱歉，text.txt - 示例文本文件。这是在 iframe 示例标记中使用的示例。
这里是 plunker 的链接。 - plnkr.co/edit/QDDeeBvtsIzPUKaUOxV5?p=preview

标签： javascript jquery html angularjs iframe

【解决方案1】：

你可以用 Jquery 轻松完成，你可以在 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;
}

您只需要在 iframe 的 html 中获取单词的位置，您可以使用 $("#id-of the iframe")[0].outerHTML 获取，然后在该位置插入一个带有单词颜色样式的 span 元素。

我使用 Div 制作了一个基本示例，其工作方式与使用 iframe 的方式相同，您可以在此处查看示例：

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

【讨论】：

感谢您的帮助。