Instructions for relocating the ending of a javascript range to a sentence within the Chrome browser

Question

Instructions for relocating the ending of a javascript range to a sentence within the Chrome browser

When working with a javascript range object, Internet Explorer offers a moveEnd method that can shift the end of a range by a specified number of sentence units.

How can a similar functionality be achieved in Chrome?

Below is the code I have written that seems to work, but it also highlights beyond the end of the sentence.

var range = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : new Range();
var startNode = document.getElementsByTagName("p")[0];
var endNode = document.getElementsByTagName("p")[0];
var endOffset = endNode.childNodes.length;
range.setStart(startNode, 0);
for (i = 0; i <= endNode.childNodes.length; i++) {
  range.setEnd(endNode, i);
  if (/.+\./.test(range.toString()))
    break;
}
var newNode = document.createElement("span");
newNode.setAttribute('class', 'highlight');
range.surroundContents(newNode);

.highlight {
  
  background-color:yellow;
}

<p><b>John Fitzgerald</b> "<b>Jack</b>" <b>Kennedy</b> (May 29, 1917 – November 22, 1963), commonly referred to by his initials <b>JFK</b>, was an American politician who served as the <a href="/wiki/List_of_Presidents_of_the_United_States" title="List of Presidents of the United States">35th President of the United States</a> from January 1961 until <a href="/wiki/Assassination_of_John_F._Kennedy" title="Assassination of John F. Kennedy">his assassination</a> in November 1963. The <a href="/wiki/Cuban_Missile_Crisis" title="Cuban Missile Crisis">Cuban Missile Crisis</a>, <a href="/wiki/The_Bay_of_Pigs_Invasion" class="mw-redirect" title="The Bay of Pigs Invasion">The Bay of Pigs Invasion</a>, the <a href="/wiki/Partial_Nuclear_Test_Ban_Treaty" title="Partial Nuclear Test Ban Treaty">Nuclear Test Ban Treaty</a>, the establishment of the <a href="/wiki/Peace_Corps" title="Peace Corps">Peace Corps</a>, developments in the <a href="/wiki/Space_Race" title="Space Race">Space Race</a>, the building of the <a href="/wiki/Berlin_Wall" title="Berlin Wall">Berlin Wall</a>, the <a href="/wiki/Trade_Expansion_Act" title="Trade Expansion Act">Trade Expansion Act</a> to lower tariffs, and the <a href="/wiki/African-American_Civil_Rights_Movement_(1955%E2%80%931968)" class="mw-redirect" title="African-American Civil Rights Movement (1955–1968)">Civil Rights Movement</a> all took place during his presidency. A member of the <a href="/wiki/Democratic_Party_(United_States)" title="Democratic Party (United States)">Democratic Party</a>, his <a href="/wiki/New_Frontier" title="New Frontier">New Frontier</a> domestic program was largely enacted as a memorial to him after his death.</p>

javascript google-chrome

Answer 1

Answer №1

My solution works really well.

MySolution.Example = class extends Range {
  /*  Example object understands everything about examples
      It has a starting and ending point, and completes with a concluding statement
      It can move around the document
  */
  
  constructor() {
    super();
    this.document = new MySolution.Document();
    this.pattern = new MySolution.Pattern();
    this.highlighted = false;
    this.backupHtml = '';
    this.document.LoadAllTextNodes();
    this.SetToRange(this.document.GetSelectedRange() || this.document.GetFirstRange());
    this.collapse(true);
    this.SetEndPoints();
    this.Expand();
  }

  /* public properties */
  get CanMoveBack() {
    return !this.StartPoint.Bof;
  }

  get CanMoveForward() {
    return !this.EndPoint.Eof;
  }

  set Highlighted(value) {
    if (value == this.highlighted) return;
    if (value)
      this.Highlight();
    else
      this.Unhighlight();
    this.highlighted = value;
  }

  /* public methods */
  Expand() {
    this.StartPoint.Search(this.pattern.ConcludingStatement, false);
    this.StartPoint.Search(this.pattern.NonEmpty, true);
    this.EndPoint.Search(this.pattern.ConcludingStatement, true);
    this.Align();
  }

  MoveForward() {
    this.EndPoint.Next();
    this.Align();
    this.collapse(false);
    this.SetEndPoints();
    this.Expand();
  }

  MoveBackward() {
    this.StartPoint.Search(this.pattern.ConcludingStatement, false);
    this.StartPoint.Previous();
    this.Align();
    this.collapse(true);
    this.SetEndPoints();
    this.Expand();
  }

  Align() {
    this.setStart(this.StartPoint.TextNode, this.StartPoint.Offset);
    this.setEnd(this.EndPoint.TextNode, this.EndPoint.Offset);
  }

  SetToRange(range) {
    this.setStart(range.startContainer, range.startOffset);
    this.setEnd(range.endContainer, range.endOffset);
  }

  SetEndPoints() {
    this.StartPoint = new MySolution.Point(this.document, this);
    this.EndPoint = new MySolution.Point(this.document, this);
  }

  Highlight() {
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(this);
    this.highlighted = true;
  }

  Unhighlight() {
    this.highlighted = false;
  }

  Visualize(label) {
    // Visualization method to display the example
  }
}

/* Classes */
MySolution.Point = class {
  constructor(document, range) {
    this.document = document;
    this.TextNode = range.startContainer;
    this.Offset = range.startOffset;
    this.Bof = false;
    this.Eof = false;
  }

  Search(regex, forward) {
    // Search method to find a specific pattern
  }

  Previous() {
    // Move backward method
  }

  Next() {
    // Move forward method
  }

  toString() {
    // Convert point to string
  }
}

.highlight {
  background-color: yellow;
  outline: 1px solid green;
}

Your HTML code here.

Answer 2

My solution works really well.

MySolution.Example = class extends Range {
  /*  Example object understands everything about examples
      It has a starting and ending point, and completes with a concluding statement
      It can move around the document
  */
  
  constructor() {
    super();
    this.document = new MySolution.Document();
    this.pattern = new MySolution.Pattern();
    this.highlighted = false;
    this.backupHtml = '';
    this.document.LoadAllTextNodes();
    this.SetToRange(this.document.GetSelectedRange() || this.document.GetFirstRange());
    this.collapse(true);
    this.SetEndPoints();
    this.Expand();
  }

  /* public properties */
  get CanMoveBack() {
    return !this.StartPoint.Bof;
  }

  get CanMoveForward() {
    return !this.EndPoint.Eof;
  }

  set Highlighted(value) {
    if (value == this.highlighted) return;
    if (value)
      this.Highlight();
    else
      this.Unhighlight();
    this.highlighted = value;
  }

  /* public methods */
  Expand() {
    this.StartPoint.Search(this.pattern.ConcludingStatement, false);
    this.StartPoint.Search(this.pattern.NonEmpty, true);
    this.EndPoint.Search(this.pattern.ConcludingStatement, true);
    this.Align();
  }

  MoveForward() {
    this.EndPoint.Next();
    this.Align();
    this.collapse(false);
    this.SetEndPoints();
    this.Expand();
  }

  MoveBackward() {
    this.StartPoint.Search(this.pattern.ConcludingStatement, false);
    this.StartPoint.Previous();
    this.Align();
    this.collapse(true);
    this.SetEndPoints();
    this.Expand();
  }

  Align() {
    this.setStart(this.StartPoint.TextNode, this.StartPoint.Offset);
    this.setEnd(this.EndPoint.TextNode, this.EndPoint.Offset);
  }

  SetToRange(range) {
    this.setStart(range.startContainer, range.startOffset);
    this.setEnd(range.endContainer, range.endOffset);
  }

  SetEndPoints() {
    this.StartPoint = new MySolution.Point(this.document, this);
    this.EndPoint = new MySolution.Point(this.document, this);
  }

  Highlight() {
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(this);
    this.highlighted = true;
  }

  Unhighlight() {
    this.highlighted = false;
  }

  Visualize(label) {
    // Visualization method to display the example
  }
}

/* Classes */
MySolution.Point = class {
  constructor(document, range) {
    this.document = document;
    this.TextNode = range.startContainer;
    this.Offset = range.startOffset;
    this.Bof = false;
    this.Eof = false;
  }

  Search(regex, forward) {
    // Search method to find a specific pattern
  }

  Previous() {
    // Move backward method
  }

  Next() {
    // Move forward method
  }

  toString() {
    // Convert point to string
  }
}

.highlight {
  background-color: yellow;
  outline: 1px solid green;
}

Your HTML code here.

Instructions for relocating the ending of a javascript range to a sentence within the Chrome browser

Answer №1

Similar questions

Is it feasible to package shared modules into individual files using Browserify?

AngularJS provides users with the ability to access additional information by matching specific identification

Restrict the quantity of items retrieved from an AJAX response

Displaying currency format in an input field using AngularJS filter

In Next.js, the Typescript compiler does not halt when an error occurs

Discovering the specifics of an appointment within a shift event using FullCalendar

Adding or removing a class using Jquery based on the condition of form validation

Rounding Decimals using JavaScript

The error message "Error: 'x' is not a defined function or its output is not iterable"

Creating compressed files using JavaScript

Utilize the split() function to break down a string into separate

Nested Op.or operations within Sequelize for multiple conditions

Searching for variables within files using Node.js and constructing an object from the results

jQuery's element loading function fails to work with ajax requests

Setting up a React application and API on the same port: A step-by-step guide

How to eliminate the hash from a particular page in VueJS

Include the name of the uploaded attachment in the textarea before hitting the submit button

Ways to access text content in an HtmlTableCellElement

Extract ID for Bootstrap modal display

Adding Labels to Doughnut Charts in React using Chart.js 2.0