个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试在 iframe 中搜索一个单词并使用 angularjs 和 jquery 为其着色。对于 jquery 代码，我从 @andrew stackoverflow 获得了帮助。 。 在 Jquery 代码中，如果条件存在， Controller 不会进入 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")
}
}
});
最佳答案
您可以使用 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 相同，您可以在此处查看示例:
关于javascript - 搜索单词并为其着色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46881808/
25
4
0
我有以下数据框 (df_hvl)，列名“FzListe”和以下数据: FzListe 7MA1, 7OS1 7MA1, 7ZJB 7MA2, 7MA3, 7OS1 76G1, 7MA1, 7OS1 7
我有点小问题。仅当尝试写入的相同字符串/单词不存在时，我才想写入文件。在我的例子中，它是一个 IP 地址和端口，用“:”分隔。如果我手动写入文件，例如 193...:80 和 193...:22，它指
如何返回结果列中的单词示例？ 我得到的最接近的是 [\W]{2,}[^,\W].+[?=,] ID 文本 我的结果(完全匹配) 预期(完全匹配) 1 词A，世界B，词C , 世界 B, 字B 2 wo
我想在引号之间得到一个字符串 我知道一个解决方案是: /'.*?'/ 但问题是它不适用于英语中的所有格或收缩格 例如: What is the name of Mario's brother in t
我应该在句子中找到出现最多的单词。 这是我尝试过的，但不起作用。 '); $max = -1; $resultWords = array(); $resultCount = array(); $i =
我是vim的新手。我正在尝试练习(最近阅读了一些教程)，但是我发现我不能不突出显示“复制粘贴”中的字符/单词/行。 在Textmate中，我通常使用SHIFT + CTRL + LeftArrowKe
有谁知道一个JSON格式的英语词典，该词典具有(单词，定义和单词类型，例如名词/形容词/动词/副词) 这种格式: [ {"Word" : "Chair", "Definition" : "A
我正在做一些 javascript，同时我注意到我无法替换 html 标记内的“ document.getElementById('label').innerHTML = document.get
您好，我正在使用 groovy 2.1.5，我必须编写一个代码来显示具有给定路径的目录的内容/文件，然后它会备份文件并替换文件中的单词/字符串。 这是我用来尝试替换所选文件中的单词的代码 String
我正在准备一个实验，我想使用python编写程序以识别参与者说出的某些单词。 我在python中搜索了很多有关语音识别的内容，但结果却很复杂(例如CMUSphinx)。 我要实现的是一个程序，该程序接
假设我有以下代码: $size = 23.9 $size = "$size GB" write $size 我想在其他事情上使用相同的变量，即 if ($size -lt 20) {...} 这显然是
我想替换字符串中单词 Date 的所有情况，除非它是 Date()(即 Date 后跟括号)。这是一个字符串示例以及我最初尝试的内容: x gsub("Date", paste("Date:", S
我对 Java 和编程都很陌生，请记住这一点，请不要对我严厉 ^^。接下来，我最近用 Java 进行了一些培训，我喜欢这个挑战，但现在我只是陷入困境。我做了一些示例来查找用户输入的最大字符串，一切都很
我必须给一个数字x，并写x个字符串(单词)。我必须找到写得最多的那一篇。它可以工作，但是当我尝试从文件中读取它时，却没有。例如，如果我执行 a.out'' #include #include in
这里是学习者，如果这个问题看起来很荒谬，请多多包涵。假设我试图引用字符串中的字符而不是字符串本身，我该怎么做呢？我的意思是; 给定:var str = "我想知道一个大脑分散的计算机如何保持理智" 我
这是阿克沙塔。我一直在解析以下数据。我想单独获取每个单词。我可以有一个示例代码以便我可以继续吗 RTRV-HDR RH01 SIMULATOR 09-11-18 16 13 19 M R
我有一个任意字符串，它总是包含至少一个英文单词后跟一系列数字:"Hello World 1234" 我如何只提取 "Hello World" 来自字符串？ 最佳答案 在我看来你需要反正则表达式: St
我正在尝试输入一个四个单词的句子，然后能够使用indexOf和子字符串单独打印出每个单词。有什么想法我做错了吗？ 已编辑 那么这就是它应该的样子吗？我已经运行了两次，得到了两个不同的答案，所以我不确定
如何在文本开头查找短语(单词) 我需要非常快速的解决方案来查明文本是否以某些已知短语开头 我在 Mysql (innodb) 表中的短语如下: CREATE TABLE IF NOT EXISTS `
我在 MYSQL 表中有一本字典，该表由 240 000 个单词组成。例如，如果我有字母 G、I、G、S、N> 和 O 我想选择表中包含所有或部分这些字母(并且没有其他字母)的所有单词。 可接受的词语
我是一名优秀的程序员,十分优秀！