使用jQuery在网页上突出显示字符串的字符 [英] Using jQuery to highlight a character of a string on a webpage

问题描述

我想使用jQuery在某个值的索引处突出显示网页上字符串的字符.该值是变量–一次它将在索引2上，下次它将在索引3上.

I want to use jQuery to highlight a character of a string on a webpage at an index of some value. The value is variable – one time it will be at the index of 2, and the next time it will be at the index of 3.

var copy = "I am learning how to program.";
$('#letter').text(copy);
//code to highlight

输出示例:

推荐答案

我想使用jQuery在某个值的索引处突出显示网页上字符串的字符

I want to use jQuery to highlight a character of a string on a webpage at an index of some value

要按索引高亮显示字符，请使用以下代码段.这适用于已经生成的DOM.要使此工作正常运行，您所需要的只是一个索引.

To highlight characters by its index, Use the below snippet. This works on the already generated DOM. And all you need to get this working is a index.

$(function() {
  var docText = $('#docContent').text();
  var modifiedText = docText.highLightAt(7); //pass a index and that text will be highlighted.
  $('#docContent').html(modifiedText);

  //you can replace this 3 lines of code to single line like 
  // $('#docContent').html($('#docContent').text().highLightAt(7));
});

//define a highLightAt function to replace your char with a highlighted one.
String.prototype.highLightAt = function(index) {  
  return this.substr(0, index) + '<span class="highlight">' + this.substr(index,1) + '</span>' + this.substr(index +1);
}

.highlight {
  background-color: yellow;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="docContent">
  You random text goes here, And The program would highlight that particular character at a given index.
</div>

Note:我不知道如何使索引突出显示，除非您完全确定如何生成索引，否则您可能最终给出了空格字符的索引，或者可能无法完全控制索引.所以我觉得玩角色应该更容易，更安全.

Note: I have no idea how you are getting the index to highlight, You might end up giving index of a space character or you might not have total control over the index unless you are pretty sure of how you are generating it. So I feel playing with the characters should be easier and safe.

其他信息

以前，我在SO中为一个人构建了类似的东西.这是工作的Jsfiddle .这必须给您一个基本的想法.以下是您感兴趣的片段.

Previously I had built a similar stuff for a guy in SO. Here is the Working Jsfiddle. This must give you a basic idea. Below is a snippet you can look at if you are interested.

$(function(){ 
  var docText = $('#docContent')[0].innerHTML;
  var modifiedText = docText.replace(/e/g, "<span class='highlight'>e</span>"); //using regex to match all the chars `e`, We are not playing with the index, But only chars here  
 $('#docContent').html(modifiedText);
 
  setInterval(function() { 
     $('span.highlight:not(.highlight-active):eq(0)').addClass('highlight-active');
     }, 1000);
});

.highlight-active {
  background-color: yellow;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="docContent">
  You random text goes here, And The program would highlight all the characters 'e' in this text.
</div>

这篇关于使用jQuery在网页上突出显示字符串的字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！