Hyperlink to an image and search of a word/text in an HTML page code doesn't work together. How to resolve this?

Question

1.00/5 (2 votes)

See more:

Hello,

Below js code is creating a link to an image and giving a background color of the a word or text in an html page. The problem I am having now is that, when this line of code 'formatted-ticket-content' has # infront, the code creates a link to an image. However, the code for searching a word or text in an html page and giving it a background doesn't work.

const element = document.getElementById('#ticket-content');

When I remove the # infront of ticket-content, the code for searching a word or text in an html page and giving it a background works but the code for creating a link to an image doesn't work.

const element = document.getElementById('ticket-content');

What I have tried:

if (A == true && B == true && C == true) {

                let link = document.createElement("a");
                var linkText = document.createTextNode(images[i].name);
                link.appendChild(linkText);
                link.title = images[i].name;
                link.href = images[i].image_src;
                document.getElementById('ticket-content').prepend(link);

                // Find the word One Two and set background color on page load
                const htmlEncode = value => {
                const span = document.createElement("span");
                span.innerText = value;
                return span.innerHTML;
};

                const highlightWord = wordToFind => {
                const element = document.getElementById('#ticket-content');
                const originalLines = element.textContent.split("\n");
                const newLines = originalLines.map(line => {

            if (!line.includes(wordToFind)) {
                return htmlEncode(line);
    }

                const parts = line.split(", ").map(htmlEncode);
                parts[0] = `<span style="background-color:yellow;">${parts[0]}</span>`;
                return parts.join(", ");
  });

                element.innerHTML = newLines.join("\n");
};
                highlightWord("One Two");

I also tried using below but it's giving me the same result. Hoping someone can help me on this issue. Thank you very much.

document.querySelector('ticket-content'); or document.querySelector('#ticket-content');

Posted 10-Apr-23 4:05am

User-15933587

Updated 15-Jun-23 4:23am

v7

Add a Solution

Comments

Richard Deeming 15-Jun-23 9:17am

Removing the content from your questions after they have been answered is extremely rude.

I have rolled back your destructive edits to all three questions.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2023-04-10T22:39:00

Solution 1

As I explained in your previous question, the highlightWord function works if your element contains only text.

You are adding an <img> to your element. You cannot process its textContent and expect that to preserve the non-text child elements.

Add your text to a specific container element which only contains text, and then highlight the word within that element.

Posted 10-Apr-23 22:39pm

Richard Deeming

Comments

Richard Deeming 11-Apr-23 5:36am

Assuming it's the linkText you want to search, replace:

var linkText = document.createTextNode(images[i].name);

with:

const linkText = document.createElement("span");
linkText.textContent = images[i].name;
linkText.classList.add("text-to-search");

Then update the highlightWords function to search every .text-to-search element:

const highlightWord = wordToFind => {
    document.getElementById("formatted-ticket-content").querySelectorAll(".text-to-search").forEach(element => {
        const originalLines = element.textContent.split("\n");
        const newLines = originalLines.map(line => {
            if (!line.includes(wordToFind)) {
                return htmlEncode(line);
            }
            
            const parts = line.split(", ").map(htmlEncode);
            parts[0] = `<span style="background-color: rgba(255, 255, 0, 1)">${parts[0]}</span>`;
            return parts.join(", ");
        });
        
        element.innerHTML = newLines.join("\n");
    });
};

User-15933587 18-Apr-23 1:45am

Hi Richard,

Good day. Looking forward to your response.

Thank you very much.

Richard Deeming 18-Apr-23 9:45am

You need to explain precisely what text you are trying to process, and what the problem is.

Create a small JSFiddle[^] to demonstrate the problem, and post the link here.

User-15933587 18-Apr-23 10:08am

Hi Richard, the highlightword function doesn’t work, only the hyperlink does. Basically, I am searching for a word in an html page and give it a background color for example: One Two (written in one line), Three Four ( written in another line). I will try to make a JSFiddle and post it here asap. Sorry to ask you again, would you be so kind to check if the code I posted can modified or improved.

Thank you Sir