educative.io

Highlight Text this must be 15 characters

Courses
,
#1

Hi, I have worked through this section, but am interested in how to allow a user to highlight text on a page. I looked back at “Alternative Approach to find the Middle” and used
document.onmouseup = () => {
const selection = document.getSelection();
console.log(selection);
const anchorNode = selection.anchorNode;
const focusNode = selection.focusNode;

  if (anchorNode != focusNode) {
    // Cross-paragraph selection
    return;
  }
  
  const selectedText = anchorNode.data.substring(selection.anchorOffset, selection.focusOffset);

  const rangeRect = selection.getRangeAt(0).getClientRects()[0];

  const dot = document.createElement("div");
  dot.style.width = "5px";
  dot.style.height = "5px";
  dot.style.background = "red";
  dot.style.position = "absolute";
  // Middle
  dot.style.left = `${rangeRect.x + (rangeRect.width/2)}px`;
  dot.style.top = `${rangeRect.y}px`;
  document.body.appendChild(dot);
}

If we use:
console.log(selectedText);
That returns the text that we select. However, if I try to do anything with this value I get errors.
selectedText.style.backgroundColor = “blue”;
does not work.
I tried
let selected = [];
selected.push(selection.data);
console.log(selected);
/* console.log(selectedText); */
let string = new String(selectedText);
selected.push(string);
But the selected array just returns undefined. I don’t understand how to extract the text value and then create a function that looks through the pages text and matches it to the selected text and then highlighting it.

Course: Intermediate JavaScript: Building Frontend Components - Learn Interactively
Lesson: Alternative Approach to find the Middle - Intermediate JavaScript: Building Frontend Components

#2

Hi @Cadence
You can use the following code which takes the text value and then create a function that looks through the given text and matches it to the selected text and then highlights it. You can further modify it according to your need.
<!DOCTYPE html>
<html>
<body>
<h2>Highlight Function</h2>
<button onclick=highlight('popular')>Highlight</button>
<div id="inputText">
Web development is unique in that it’s constantly evolving at a pace much quicker compared to a lot of domains in software engineering like databases or iOS. The “right way” to do things in web development changes rapidly. Frameworks trend and fade on the order of a small number of years whereas popular databases stay the same for decades.
</div>
<style>
.highlight {
background-color: pink;
}
</style>
<script>
function highlight(text) {
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML; }
}
</script>
</body>
</html>
Just simply copy and paste this code into compiler, run your code and click “Highlight” - this should highlight the word “popular”.

Hope it will help , Happy Learning :blush: