0

(This is all in a class-based component)

I have a component that essentially handles dumping out a text file line by line onto the page. Each sentence of that text file is separated by a line and within its own <p> element like so:

{this.state.contract.text.map((line, index) => (
                      <p key={index}>{line}
                      <Highlighter
                      highlightClassName="MyHC"
                      highlightStyle={{backgroundColor: "#ffd500"}}
                      searchWords={queryWords} 
                      autoEscape={true}
                      textToHighlight={line}/> 
                      </p>
                    ))}

I am curious how I could go about scrolling to a specific bit of text within this large text dump, specifically words that appear in queryWords which is just a string. I would have to do this after the full page is rendered I'm guessing but not sure where I'd make the call to a function that could do something like this with that queryWords variable in mind. What Ideally happens is the text gets highlighted according to the queryWords all throughout the text and then the window scrolls to the first instance of <p> that is highlighted.

One approach I had was to just take this queryWords and doing something with this:

$(`*:contains('${queryWords}'):first`);

but this gave me some trouble. Is there any other methods of scrolling to a specific string of text that has been rendered (and where would I call a function to do this, after the first code snippet or within componentDidMount)?

LessTRess
  • 11
  • 1
  • One method could be to attach a `ref` or target (such as `id` or `class`, so that it can be targeted with functions such as `document.getElementById`) to the text you wish to highlight. You could then find where it is on the page with `element.getBoundingClientRect()` and scroll to it with `window.scrollTo(...)`. I'd post an answer but I don't know enough about the `Highlighter` component being used. – Harrison Jun 22 '23 at 13:29
  • There is also this article, https://medium.com/@krith/how-to-build-reliable-search-highlighting-for-your-product-2bf581b8289c – Harrison Jun 22 '23 at 13:30

1 Answers1

0

make an input html tag and a button. writing the text and pressing on the button it will find its location and scroll on it..

html:

<button onclick="findt()" type="submit" class="btn btn-danger">Find Text</button>
<input id="inputtext" value="">

javascript:

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}
function findt(){
    var text = document.getElementById("inputtext").value;
    var pels = document.querySelectorAll("p");
    for (var pe of pels){
        var te = pe.innerHTML;
        console.log(text);
        console.log(te.match(text));
        if (te.match(text)!=null){
            console.log(pe.innerHTML);
            var rect = getOffset(pe);
            console.log(rect);
            console.log(rect.left);
            console.log(rect.top);
            window.scrollBy(rect.left,rect.top)
        }
    }
}
AbuAli
  • 41
  • 3
  • For some reason I couldn't get this to work, though I appreciate the idea. Could the fact that this text dump is being done inside a TabPane be interfering with this solution? – LessTRess Jun 22 '23 at 12:17
  • no, it a simple vanilla JS code so it should work in TabPane too.. see the link: https://docs.oracle.com/javafx/2/deployment/javafx_javascript.htm – AbuAli Jun 22 '23 at 12:23