搜索词并为它着色 [英] Search for word and color it
问题描述
我试图在iframe中搜索一个单词并使用angularjs和jquery对它进行着色。对于jQuery代码，我从@andrew获得了帮助计算器。
在Jquery代码中，如果条件存在，那么控制器不会在条件内进入。请帮我解决问题。
以下是我的完整代码，其中包含角码和jQuery代码。
Angular代码工作得很好，在控制台中，我能够看到所有的控制台，首先我解析数组并只取出搜索所需的字符串jquery。之后，我使用该搜索词在iframe中进行搜索。但我正面临着jQuery代码的一些问题。
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp：// www .w3.org / TR / HTML4 / strict.dtd>
< html ng-app =app>
< head>
< title>
<％= t itle％>
< / title>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link href =http://fonts.googleapis.com/css?family=Lato =stylesheettype =text / css>
< link href =http://fonts.googleapis.com/css?family=Montserrat =stylesheettype =text / css>
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css>
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css>
< / head>
< body>
< div ng-controller =ToddlerCtrl>
< h2>样本< / h2>
< / div>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js>< / script>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js>< / script>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js>< /脚本>
< script type =text / javascriptsrc =http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js >< /脚本>
< script type =text / javascriptsrc =http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js>< / script>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script>
< iframe src =text.txtid =myIframe>< / iframe>
< script type =text / javascript>
var myApp = angular.module（'app'，[]）;
$ b $ myApp.controller（'ToddlerCtrl'，function（$ scope）{
//定义一个Toddler对象数组$ b $ scope.toddlers = [
[100，[sample]]，
[100，[used]]，
[100，[tag]]，
[33.33333333333334，[file $]
$;
（$ scope.toddlers中的var键）{
if（$ scope.toddlers.hasOwnProperty（key））{
var temp = JSON.stringify（$ scope.toddlers [key] [1]）$ b $ b var final_string = temp.slice（2，-2）;
var searchWord = final_string ;
// console.log（searchWord）
$（document）.ready（function（）{
$（'＃myIframe'）。ready（function（）{ （$ html）= $（$（'＃myIframe'）。contents（）。find（'body'）。html（））;
if（$ html.contents（）如果条件是
//控制器没有输入
var replaceWith = .text（）。search（searchWord）！= -1）{
// if条件的一些问题， < ; 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）
}
}
}）;
$ b $
b
函数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）;
返回firstHtmlPart + coloredWord + secondHtmlPart;
}
您只需要在iframe的html中获取单词的位置，你可以用 $（＃iframe的iframe）[0] .outerHTML 来获得，并且在该位置插入一个span元素，这个词。
我创建了一个Div的基本示例，其工作方式与使用iframe相同，您可以在此处看到示例：
https://jsfiddle.net/9zt976uz / 2 /＃& togetherjs = nQoh3LINQG
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")
}
}
});
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
这篇关于搜索词并为它着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
