- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将文本作为变量值传递给 javascript,以便突出显示相关内容。
例如:在 HTML 中:
<p id="sentence" >a paragraph </p>
<p id="content"> And this here is inside a paragraph , about paragliders. happy ending.</p>
在 CSS 中:
.highlighted { background:yellow }
在 JavaScript 中:
var word= document.getElementById('sentence').value;
var root=document.getElementById('content').value;
function highlightWord(root,word){
textNodesUnder(root).forEach(highlightWords);
function textNodesUnder(root){
var walk=document.createTreeWalker(root,NodeFilter.SHOW_TEXT,null,false),
text=[], node;
while(node=walk.nextNode()) text.push(node);
return text;
}
function highlightWords(n){
for (var i; (i=n.nodeValue.indexOf(word,i)) > -1; n=after){
var after = n.splitText(i+word.length);
var highlighted = n.splitText(i);
var span = document.createElement('span');
span.className = 'highlighted';
span.appendChild(highlighted);
after.parentNode.insertBefore(span,after);
}
}
}
我还有一个问题是如何循环函数以便突出显示多个句子???非常感谢!
更新:在 html/jsp 中: https://jsfiddle.net/bob90937/2yw3s376/如何改善这一点。以便可以突出显示多个句子?????
最佳答案
稍微修改了您的代码。还使用 JQuery 轻松读取段落值:
$(document).ready(function() {
var wordText = $('#sentence').text();
var rootText = $('#content').text();
var rootNode = document.getElementById('content');
highlightWord(rootText, wordText);
function highlightWord(rootText, wordText) {
textNodesUnder(rootNode).forEach(highlightWords);
function textNodesUnder(rootNode) {
var walk = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT, null, false);
var text = [],
node;
while (node = walk.nextNode()) text.push(node);
return text;
}
function highlightWords(n) {
for (var i;
(i = n.nodeValue.indexOf(wordText, i)) > -1; n = after) {
var after = n.splitText(i + wordText.length);
var highlighted = n.splitText(i);
var span = document.createElement('span');
span.className = 'highlighted';
span.appendChild(highlighted);
after.parentNode.insertBefore(span, after);
}
}
}
});
.highlighted {
background: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p id="sentence">a paragraph</p>
<p id="content">And this here is inside a paragraph , about paragliders. happy ending.</p>
更新的 fiddle 链接:
https://jsfiddle.net/2yw3s376/3/
处理<table>
的代码结构:
HTML:
<tr>
<td class="sentence">a paragraph</td>
<td class="content">And this here is inside a paragraph , about paragliders.happy ending.</td>
<tr>
二手 class
而不是 id
;因为我们不能在 DOM 中有重复的 id
JS代码:
$(document).ready(function() {
//loop through all sentence one by one
$(".sentence").each(function() {
var parentTR = $(this).closest("tr");
var wordText = $(this).text();
var rootNode = parentTR.find('.content')[0];
var rootText = $(rootNode).text();
highlightWord(rootText, wordText, rootNode);
})
function highlightWord(rootText, wordText, rootNode) {
textNodesUnder(rootNode).forEach(highlightWords);
function textNodesUnder(rootNode) {
var walk = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT, null, false);
var text = [],
node;
while (node = walk.nextNode()) text.push(node);
return text;
}
function highlightWords(n) {
for (var i;
(i = n.nodeValue.indexOf(wordText, i)) > -1; n = after) {
var after = n.splitText(i + wordText.length);
var highlighted = n.splitText(i);
var span = document.createElement('span');
span.className = 'highlighted';
span.appendChild(highlighted);
after.parentNode.insertBefore(span, after);
}
}
}
});
关于javascript - 将html文本内容传入javascript函数,可高亮多句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40414898/
我正在使用http://plugins.jquery.com/project/maphilight用于当我将鼠标悬停在图像 map 上时突出显示区域,但我也想在单击时保持其突出显示。单击另一区域时,前
所以目前,我正在尝试为三个 TextView 创建一个选定状态 目前,对于每个 TextView ( H M S ),文本都是红色的: 但是,当点击 H M 或 S 时,我希望它变成另一种颜色——白色
我们正在尝试添加一些与我们网站的访问者相关的视觉统计数据。我们现在关注访问者的位置。 我们想要创建一个 map (通过 jquery 插件): a) 在 map 上显示输入的 IP 的位置,或者如果第
我在 stackoverflow 上阅读了几个关于 RecyclerView 中项目突出显示的问题,但我什么也做不了,但我的问题应该更容易,因为我只想突出显示一个项目。我成功地做了一些事情,但它也突出
我正在使用 ElasticSearch 来索引文档。 我的映射是: "mongodocid": { "boost": 1.0, "store": "yes", "type": "strin
所以,这不是绝对需要,但我很好奇,如果它存在,我可能会想在某个时候使用它...... 我开发了一个网站(不是我的设计),其中某些文本区域有文本阴影,我注意到当突出显示所述文本时,它不是很清晰。我知道并
我并排显示了以下三个元素: Title T1 T2 T3 我想在用户点击后突出显示该元素(例如 T1)。类似于 stackove
我试图很好地显示 NSTextView 中突出显示的段落。现在,我通过创建一个带有背景颜色的 NSAttributedString 来做到这一点。这是一些简化的代码: NSDictionary *at
我怎样才能让我的类被突出显示为一个普通的原始类型,比如 int 或 double? 看一个例子: 当我声明 Test aloha; 时,我想要那个测试以与 int a 相同的方式突出显示. 最佳答案
我不介意语法着色,但我发现 Notepad++ 突出显示整个 Javascript 代码块,有效地使它们变暗并使其难以阅读,这非常烦人。它看起来像这样: 正如您所看到的,它用紫色遮盖了整个 JavaS
我想根据路由切换 routerLinkActive 的突出显示,我有一个仪表板组件,仪表板菜单项和标签菜单项都引用同一个组件,我想根据路线向 li 元素添加类对于仪表板,路线将是 http://loc
试图摆脱 IE 中的蓝色突出显示。这是一个选择标签。当您下拉下拉框并选择一个选项时,会出现蓝色突出显示。我在 Mac 上并且没有 IE,所以我无法测试它。它只是背景颜色:透明吗? 这是我所看到的图像。
我最近获得了 Microsoft Visual Studio 2015 企业 RC。在此屏幕截图中,我使用的是 C#。我突出显示了括号,但这些括号内的 block 没有像在 Visual Studio
有谁知道是否有任何 Sublime Text 2 包可用于为 SpecFlow/Gherkin 规范文件启用语法高亮显示? 最佳答案 有一些解决方案可以将 Sublime Text 与 Gherkin
我是 Elasticsearch 的新手。我希望在 Java 客户端中突出显示字段。如果我在 Windows 提示符下运行以下查询: { "query": { "filtere
如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份) "==========================================================
我正在 Eclipse 中使用 PhoneGap for Android 编写一个应用程序。由于项目是Android项目,所以是Java视角。无论出于何种原因,Eclipse 都不会为我突出显示 HT
狼群! 我想突出显示我悬停的任何元素,就像 Chrome 开发工具所做的那样。 Picture of Chrome Dev Tools 请注意整个元素是如何浸透在蓝色调中的?这不像添加背景颜色或线性渐
我是一名优秀的程序员,十分优秀!