Emphasizing text by utilizing the information from a separate division

I am seeking a way to visually emphasize specific words within a paragraph by utilizing content from another div. For example, in the first div, there is the phrase "increase overall code" that I would like to highlight within the main paragraph. Thank you for offering your assistance here!

function highlight() {
  var htext = document.getElementById("torles");
  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);
    innerHTML.innerHTML = innerHTML;
  }
}
.highlight {
  background-color: red;
}
<html>

<body>
  <div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder
  </div>
  <button onclick="highlight()">Highlight</button>

  <div class="col-md-10 para bordered" id="inputText">
    <strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
  </div>
</body>

</html>

Answer №1

Before delving into the details, let's start off with a practical example.

function applyHighlight() {
  var highlightedText = document.getElementById("highlightedWord").textContent;
  var inputText = document.getElementById("inputText");
  var textContent = inputText.innerHTML;
  var index = textContent.indexOf(highlightedText);
  if (index >= 0) {
    textContent = textContent.substring(0, index) + "<span class='highlight'>" + textContent.substring(index, index + highlightedText.length) + "</span>" + textContent.substring(index + highlightedText.length);
    inputText.innerHTML = textContent;
  }
}
.highlight {
  background-color: yellow;
}
<html>

<body>
  <div class="col-md-10 bordered selectborder fragment" id="highlightedWord">increase overall coder</div><!-- ensure no line break follows "coder"-->
  <button onclick="applyHighlight()">Apply Highlight</button>

  <div class="col-md-10 para bordered" id="inputText">
    <strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
  </div>
</body>

</html>

In summary, there were three key issues (along with a typographical error). Firstly, a line break existed in your HTML following increase overall coder, causing the script to search for that phrase with the line break included within the content, resulting in it not being found.

Secondly, you confused the actual meaning of your variables; initially, the highlightedText variable (originally identified as htext) contained a node rather than a string. Additionally, you attempted to assign the innerHTML property to innerHTML, when in reality your textContent was simply a string. The intention should have been to set the innerHTML of the corresponding node (inputText in this instance).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJs is outputting inaccurate JSON file size measurements

Currently in the process of learning AngularJS and JS in general, my goal is to retrieve the number of entries within a JSON file. The structure of the JSON file is as follows: { "title": "Watching the Wheels", "artist": "John Lennon", "year": "198 ...

Failure to inherit props in child components when using React-Redux

I've been following a React-Redux tutorial and encountered an error in the first part of the section titled "React Redux tutorial: asynchronous actions in Redux, the naive way". Post.componentDidMount src/js/components/Posts.js:12 9 | ...

Utilizing web components from NPM packages in conjunction with Svelte

My current project involves the development of a simple Single Page App (SPA) using Svelte. I have successfully implemented a basic layout and styling, as well as an asynchronous web request triggered by a button click. Now, my next objective is to utiliz ...

What is the best way to merge an array of objects into a single object?

Is there a way to dynamically convert object1 into object2, considering that the keys like 'apple' and 'water' inside the objects are not static? const object1 = { apple:[ {a:''}, {b:'&apos ...

adjusting the width of the footer area

Hey there, I'm facing a little issue with my footer. I had set the width and height for it without any background color initially. But now, I'd like to make it stretch the entire width while adding a background color to it. The challenge I' ...

Alignment in the vertical direction of two lines

I've been struggling to align some HTML elements visually the way I want. There are two lines of text followed by a link. I'm trying to get the link to be vertically centered between the two lines, rather than just after the second line. Using a ...

Recent Google algorithm changes impact websites built on AngularJS and JavaScript

Exciting news from Google today (May 28, 2014) - JavaScript content will now be rendered by the Googlebot itself! This means there's no need to worry about serving pre-rendered pages just for crawling purposes. You can find out more details on this an ...

Best Practice for Delivering JavaScript Files with Node.js Ajax?

In my current project, I am developing a node application that serves client-side JavaScript code to a static webpage. The goal is to have the code evaluated within the webpage, similar to the concept demonstrated in this example, but using Node.js instead ...

Obtain the background color of an element using the source attribute in Selenium WebDriver

Understanding the x-path is crucial, such as < img id="" src="/A/A/B.png" style=""> My task involves identifying the color of the image, but unfortunately, the style attribute does not provide any information about color. It only includes details a ...

Saving text as an array with: Mongoose, MongoDB, and SimpleDB-mongoose

Within my schema, I define the following: Links: [] When working with a post request in Node.js, my code looks like this: app.post('/add', function (req, res) { var newItem = new db.Item({ Links[0]: req.body.Link1 Links[1]: req.bo ...

Troubleshooting Tips: Removing a Specific Line from a Canvas Using Javascript

I need to find a method for removing a specific line without having to clear and redraw it. Learn more about clearing specific lines in Canvas with HTML5 I came across this question where everyone suggested clearing the entire page and redrawing it. Is t ...

Widget remains static until job triggers data refresh, preventing CSS transition initialization

I am struggling with the html/coffee/scss aspects, although I'm comfortable with Ruby. On my website, I have implemented a hotlist widget sourced from this link: https://gist.github.com/andre-morassut/8705385. While it functions properly, I encounter ...

The jQuery function fails to execute when the script source is included in the head of the document

I'm relatively new to working with scripts and sources, assuming I could easily add them to the header and then include multiple scripts or functions afterwards. Everything seemed to be working fine at first, but now I've encountered a problem th ...

Update: Explored 0 web pages (at a rate of 0 pages per minute) and obtained information from 0 elements (at a rate of

I'm a beginner in Python and Scrapy, currently working on my first project to crawl web security information from a website. However, when I try to run it using cmd, I encounter the message "Crawled 0 pages (at 0 pages/min), scraped 0 items (at 0 item ...

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

I am facing a puzzling issue where two different SVG elements are causing my JavaScript to work in one scenario but not the other. I have replaced the SVG elements in both examples, and surprisingly, only one works while the other does not. You can view th ...

It appears that the SignalR proxy is not defined

Why is $.connection.connectionhub showing as undefined? I am using webform. <script src="/scripts/jquery-1.6.4.min.js"></script> <!--Reference the SignalR library. --> <script src="/scripts/jquery.signalR-2.2.1.min.js">< ...

Using JavaScript to validate birth date selection along with three drop down menus in ASP.Net

Currently, I have implemented a functionality using three drop down controls to prompt users to select their birth date. In order to validate the selected date, I have incorporated JavaScript code in all three drop down "onChange" events. The function is ...

Question on implementing JavaScript: What is the best way to show the output of this function?

Excuse me, but I have a basic understanding of JavaScript and how to write/call a simple function. However, in this particular scenario, I am attempting to align an alphabetically sorted list of categories from the database with my specified set order of c ...

Execute a controller's method by clicking a form button in PHP/CodeIgniter

Currently, I am working on a small PHP project using CodeIgniter and NetBeans. Here is the HTML view I have created: <div class="section section_with_padding" id="users"> <h1>Users Access</h1> <div class="half left"& ...

How can Vue handle passing an array in this scenario?

In my code snippet, I am attempting to build a simple form builder application. The goal is to include multiple select fields in the form. I encountered a problem with passing an array into a loop. Despite my efforts, the code did not work as expected. Ho ...