The offsets for selecting text are not accurate when multiple values share the same text

Question

The offsets for selecting text are not accurate when multiple values share the same text

I am faced with a text that goes like this ->

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

My goal now is to emphasize a specific part of this text, so I need to determine the start and end offsets of the string.

Let's say

it to make a

This is the portion of the text I wish to highlight, thus needing the offset of this particular section; my attempt at achieving this involved the following approach:

var startoffset  = $scope.original_doc_content.indexOf("it to make a ");
    var endoffset =  startoffset + string.length;

The issue arises if it to make a appears twice within the given text: in such cases, when I aim to highlight or select the second occurrence, the logic gives me the offset of the first one instead of the desired second one. How can I go about resolving this dilemma?

javascript html css angularjs

Answer 1

Answer №1

You can easily enhance your text highlighting using a simple replacement method.

window.onload = function(){
  var str = document.getElementById("mypar").innerText;
  var res = str.replace(/text/g, "<span class=\"highlight\">text</span>");
  document.getElementById("mypar").innerHTML = res;
};

.highlight {
  background-color: yellow;
}

<p id="mypar">This is my text where i want to highlight text or something</p>

Another approach to achieve text highlighting is by getting the index positions of the words. Although not the most efficient solution, this code snippet iterates over the text and logs the index values to the console.

window.onload = function(){
  var str = document.getElementById("mypar").innerText;
  var indexFirstChar = 0;
  var indexOfLastChar = 0;
  var searchString = "text";
  while(str.indexOf(searchString, indexFirstChar + 1) >= 0) {
     indexFirstChar = str.indexOf(searchString, indexFirstChar + 1);
     indexOfLastChar = indexFirstChar + searchString.length - 1;
     console.log(indexFirstChar);
     console.log(indexOfLastChar);
  }
};

<p id="mypar">This is my text where i want to highlight text or something</p>

Answer 2

You can easily enhance your text highlighting using a simple replacement method.

window.onload = function(){
  var str = document.getElementById("mypar").innerText;
  var res = str.replace(/text/g, "<span class=\"highlight\">text</span>");
  document.getElementById("mypar").innerHTML = res;
};

.highlight {
  background-color: yellow;
}

<p id="mypar">This is my text where i want to highlight text or something</p>

Another approach to achieve text highlighting is by getting the index positions of the words. Although not the most efficient solution, this code snippet iterates over the text and logs the index values to the console.

window.onload = function(){
  var str = document.getElementById("mypar").innerText;
  var indexFirstChar = 0;
  var indexOfLastChar = 0;
  var searchString = "text";
  while(str.indexOf(searchString, indexFirstChar + 1) >= 0) {
     indexFirstChar = str.indexOf(searchString, indexFirstChar + 1);
     indexOfLastChar = indexFirstChar + searchString.length - 1;
     console.log(indexFirstChar);
     console.log(indexOfLastChar);
  }
};

<p id="mypar">This is my text where i want to highlight text or something</p>

The offsets for selecting text are not accurate when multiple values share the same text

Answer №1

Similar questions

What is the best way to add a bootstrap element to each of the children?

Is it really impossible to post complex JSON parameters with Restangular?

Serve JavaScript files with Express only if the user is authenticated

Updating React component props

Learn how to retrieve data from a dynamically populated drop-down menu when a button is clicked using PHP

Using PHP to present information in a grid format using customizable templates

Dragging and arranging elements outside the main container is possible with drag-and

How to effortlessly apply a background image to an SVG path element without any tiling or scaling involved

I am experiencing an issue with my images not loading properly upon initial loading in Safari, while all other browsers are working perfectly. What

Having trouble accessing object properties fetched via API, receiving the error message "TypeError: Cannot read property '' of undefined" in Next.js with JavaScript

The UI-router activates the child state prior to resolving the parent state

Sharing state between child and parent components in React.js functional components

Creating conditional v-models for checkboxes in Nuxt using API responses

Is it possible to utilize Bootstrap plugins in conjunction with Angular-UI Bootstrap?

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Utilizing Azure SDK to send an email

Achieving a consistent border-radius effect during hover transitions

What is the most effective way to identify mobile browsers using javascript/jquery?

Performing real-time calculations for standard deviation

Sending files and attributes to a controller in ASP.NET MVC in order to retrieve a dynamically generated PDF as a Binary response - here's how!