単語と色を検索する

iframeで単語を検索し、angularjsとjqueryを使用して色を付けようとしています。 jqueryコードの場合、私は@andrew stackoverflowの助けを借りました。条件がある場合、Jqueryコードでは、コントローラは条件の中に入っていません。問題を解決するために私を助けてください。単語と色を検索する

角度コードとjqueryコードを含む完全なコードです。

角のコードはコンソールでうまくいきます。すべてのコンソールを見ることができます。まず、配列を解析し、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") 
    } 
    } 


});

出典

2017-10-23 naik3

あなたは、IFRAMEのコンテンツを提供していただけますか？ – marknorkin

申し訳ありません、** text.txt ** - **サンプルテキストファイルです。これはiframeサンプルタグで使用されているサンプルを取得しています。** – naik3

ここでは、プランカーへのリンクです。 - https://plnkr.co/edit/QDDeeBvtsIzPUKaUOxV5?p=preview – naik3

あなたは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; 
}

あなただけで単語の位置を取得する必要があります$("#id-of the iframe")[0].outerHTMLで得ることができるiframeのhtml、その位置にその単語の色付きスタイルのspan要素を挿入した後。

私はIFRAMEで、あなたはここでの例を見ることができるのと同じように動作します本部との基本的な例を集約した：

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

出典

2017-10-23 04:49:07

助けてくれてありがとう。 – naik3

答えて

関連する問題