搜索单词并为其着色
Posted
技术标签:
【中文标题】搜索单词并为其着色【英文标题】：Search for word and color it 【发布时间】：2018-04-03 13:20:29 【问题描述】：我正在尝试在 iframe 中搜索一个单词并使用 angularjs 和 jquery 对其进行着色。对于 jquery 代码，我从 @andrew *** 那里得到了帮助。 在 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 【参考方案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
【讨论】：
感谢您的帮助。以上是关于搜索单词并为其着色的主要内容，如果未能解决你的问题，请参考以下文章
React Native - 如何使用本地 SVG 文件（并为其着色）