How to connect function to my HTML element?

Question

I'm new to React/NextJS and self teaching so hoping someone can point me in the right direction. Afraid I don't know the correct terminology so please forgive me if I don't explain particularly well!

I have a user form that formats and concatenates inputs and outputs a single string to a result field on the form.

I want to highlight the user's inputs in the outputted string with a nice highlighted box (like they do on https://regex101.com).

I have achieved this by searching the final concatenated string for the user's input string, and then replacing it with HTML formatted as desired. This works really well, but I would also like to highlight the relevant input field on the form when the user hovers the span elements (as well as show a tooltip, which I've achieved with CSS).

My issue is, I can't get the onmouseover function working and I can't figure out why.

Here's my code. I've shrunk it down to be more concise, the missing code is just the exact same thing repeated 4 times for other parameters (It's not following DRY, just want it to work first!):

/**
 * @description Formats the final constructed link to highlight the user's input.
 * @param { string } finalOutput- The final link as configured earlier
 * @param {{ campaign: string; source: string; content: string; }} userParams - The user parameters
 * @returns  { string } retLink - Returns the same link but with user inputs highlighted as HTML 
 */    
function highlight_user_params(finalOutput, userParams) {
      const source = userParams.source;    
      var retLink = finalOutput;
   
      if (source.length !== 0) {
        retLink = retLink.replace(
          "=" + source,
          `= highlight_user_input("input_source") } data-tooltip="You entered: ${source}" data-tooltip-position="bottom" id="source_highlight" class="">${source}
          `
        );
      };
   return (retLink);
}

function highlight_user_input(containerID){
  // Placeholder function
  // This will be what I use to highlight the relevant input field
  console.log(containerID)
}

example finalOutput = "http://www.google.com/?campaign=query&source=query-2&content=query-3"
example userParams = {campaign:query, source:query-2, content:query-3}
example retLink = "http://www.google.com/?campaign=query... repeated for the remaining queries

How to connect function to my HTML element?

0 Answers