CODEWITHSUNDEEP
javascripthtmldom
isah
isah

Reputation: 5341

Locate node by character position(position relative to innerText)

I have this structure (can be more complex/contain nested tags)

<div id="editor">
 <p>Some <i>text</i>
 <p>Some other text</p>
</div>

I'm extracting text as is visible on screen with editor.innerText And I get:

Some text

Some other text

My backend service analyzes this text and gives me highlights with "positions". For the example above let's say it returns (0,9) meaning start is text node containing "Some" and end node is the one containing "text". How can I locate these nodes by given positions?

I've had some success with collecting text with DOM traversal and keeping track of positions but I'm losing newlines and some white space(due to textContent).

Upvotes: 4

Views: 289

Answers (1)

Joundill
Joundill

Reputation: 7533

The answer to this isn't trivial.

The best solution is to pass the innerHtml to your backend service in order to correctly highlight the text, and it'll need to be able to parse HTML.

However, your other solution is to pass your innerText to the backend, then step through all the characters in the innerHtml and ignore all the characters inside angle brackets.

This will probably require some cleaning up of whitespace, and a bit of HTML mangling, but I'll leave that up to you.

Here's an example of what I mean

let searchHtml = "<p>Some <i>text</i><p>Some other text</p>";
let outputHtml = "";
let highlightOpenTag = "<b>";
let highlightCloseTag = "</b>";
let currentlyHighlighting = false;
// Start and end positions from your backend
let startIndex = 0;
let endIndex = 9;
let inTag = false;
let textIndex = 0;

for (let i = 0; i < searchHtml.length; i++) {
  let char = searchHtml[i];
  // We don't want to insert highlight tags when we're inside a tag already
  if (char === '<') inTag = true;
  if (inTag) {
    outputHtml += char;
  } else {
    // If we're not in a tag, but we are within the text positions
    // returned from the backend, let's get highlighting
    if (textIndex >= startIndex && textIndex < endIndex) {
      if (!currentlyHighlighting) {
        outputHtml += highlightOpenTag;
        currentlyHighlighting = true;
      }
    }
    outputHtml += char;
    // If we're about to hit a tag and we're already highlighting then
    // insert our end highlight tag
    if((searchHtml.length < i+1 || searchHtml[i+1]) === '<' && currentlyHighlighting) {
      outputHtml += highlightCloseTag;
      currentlyHighlighting = false;
    }
    textIndex++;
  }  
  
  if (char === '>') inTag = false;
}

console.log(outputHtml);

Upvotes: 3

Related Questions