Obtain the beginning and ending positions of a substring within a larger string

Question

Obtain the beginning and ending positions of a substring within a larger string

As a beginner in the world of AngularJS and web development, I am faced with a challenge. I have a specific string that is currently selected on a tab, like so:

var getSelectedText = function() {
  var text = "";
  if (typeof window.getSelection !== "undefined") {
    text = window.getSelection().toString();
  } else if (typeof document.selection !== "undefined" && document.selection.type === "Text") {
    text = document.selection.createRange().text;
  }
  $scope.annotations = annotationList();
  return text;
};

This selected string is extracted from the following longer text:

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... etc

Now, my goal is to determine the start and end offsets of this selected text within the larger string.

but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised

Any suggestions on how to achieve this using JavaScript?

javascript jquery css angularjs html

Answer 1

Answer №1

Try this out and take a look at the comments:

var text = 'this is a sample text where we will search for a specific phrase';

function findPhrase(text, phraseToFind){
  var position = text.indexOf(phraseToFind);
  if(position !== -1){
    // If the phrase is found within the text
    // Start offset will be the position of the phrase
    // End offset will be the total length of the text minus the length from start to end of the phrase

    var endOfPhrase = position + phraseToFind.length;
    var endOffset = text.length - endOfPhrase;
    return { startOffset: position, endOffset:  endOffset}
  } else {
     return 'Phrase not found in the text!'
  }
}

findPhrase(text, 'search for a specific phrase')

Answer 2

Try this out and take a look at the comments:

var text = 'this is a sample text where we will search for a specific phrase';

function findPhrase(text, phraseToFind){
  var position = text.indexOf(phraseToFind);
  if(position !== -1){
    // If the phrase is found within the text
    // Start offset will be the position of the phrase
    // End offset will be the total length of the text minus the length from start to end of the phrase

    var endOfPhrase = position + phraseToFind.length;
    var endOffset = text.length - endOfPhrase;
    return { startOffset: position, endOffset:  endOffset}
  } else {
     return 'Phrase not found in the text!'
  }
}

findPhrase(text, 'search for a specific phrase')

Answer 3

Answer №2

To retrieve the starting and ending positions of a selected text within a node, you can utilize the Selection object provided by the getSelection method.

You can see a demonstration here.

document.onselectionchange = function() {
  console.log('New selection made');
  let selection = document.getSelection();
  console.log(selection);
  console.log(selection.anchorOffset);
  console.log(selection.focusOffset);
};

It's important to note that the anchor offset and focus offset do not directly correspond to the start and end indexes of the selection. In cases where the user selects text from right to left, the anchor offset will exceed the focus offset.

Consider the enumeration of both offsets based on your specific requirements.

Answer 4

To retrieve the starting and ending positions of a selected text within a node, you can utilize the Selection object provided by the getSelection method.

You can see a demonstration here.

document.onselectionchange = function() {
  console.log('New selection made');
  let selection = document.getSelection();
  console.log(selection);
  console.log(selection.anchorOffset);
  console.log(selection.focusOffset);
};

It's important to note that the anchor offset and focus offset do not directly correspond to the start and end indexes of the selection. In cases where the user selects text from right to left, the anchor offset will exceed the focus offset.

Consider the enumeration of both offsets based on your specific requirements.

Obtain the beginning and ending positions of a substring within a larger string

Answer №1

Answer №2

Similar questions

Incorporating various language URLs in Next.js using next-i18n-next functionality

Differences Between Angular Routes and $resourceComparing Angular

jQuery image resizing for elements

AngularJS is known for its ability to handle invalid HTML inserts

Stop unnecessary re-rendering of controlled React inputs

Ways to position divs without causing them to collapse or override existing divs

Looping through a JSON object in Highcharts to populate data series

Innovative guidelines originating from a resource attribute

Is it possible to determine the search query if the search term appears within the website URL?

Arrange a JSON array by searching texts initially, followed by sorting the remaining results in alphabetical order

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

Determining Visibility of DIV ID using JQuery

Exploring methods to retrieve data from the web3 platform through Node.js

Ways to conceal a child div element without using any specific ID reference

Material UI Table dynamically updates with Firestore real-time data

Click on the link within the Checkbox label on MUI

The AJAX request is functioning properly, however, when I attempt to click the icon within the button, a 500 internal server error is triggered

Is there a way to add a price to an object in JavaScript?

What are the risks of using react + bootstrap without importing bootstrap.js?

Eliminate list items with a keyboard stroke