Emphasize a specific word within a table row using Reactjs

There is a row object called 'user' that contains key-value pairs of columns and their values. My goal is to highlight all occurrences of a specific word in that row and then return the updated row within a ReactJS table.

I attempted the following approach, but it did not yield the desired results.

const searched = searchVal;
if (searched !== "") {

            Object.entries(user).forEach(([key, value]) => {
    if (value.includes(searched))
    {
            
            const re = new RegExp(searched, "g");
            const newText = value.replace(re, `<mark>${searched}</mark>`);
            value = newText;
          
          }
          return origData[index];
        }

});
}

Answer №1

This code snippet demonstrates how to highlight a specific substring in an object's properties.

const searchTerm = 'jo'

const userObj = {
 name: "john",
 lastname: "doe"
}

const applyHighlight = (object, term) => Object.fromEntries(Object.entries(object).map(([key, value]) => [key, value.replace(new RegExp(term, 'ig'), `<mark>${term}</mark>`)]))

console.log(applyHighlight(userObj, searchTerm))

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

Transmit information from javascript to the server

I am currently working on an ASP.NET MVC web application and have a query: If I have a strongly typed view and I submit it, the object (of the strongly type) will be filled and sent to the server. But what if one of the properties of the strongly typed i ...

Stop HTML <dialog> from automatically closing using Vue

I'm working on a project where I need to use Vue to programmatically prevent an HTML dialog element from closing when the close event is triggered. Here's the code snippet I am currently using: import {ref} from 'vue'; const dialogTe ...

Discover the method to retrieve the chosen value from a list of radio buttons using AngularJS

After making an AJAX request and receiving JSON data, I have created a list of radio buttons with values from the response. Although I have successfully bound the values to the list, I am facing difficulty in retrieving the selected value. Below is a snipp ...

Framer Motion causing a mix-up with my belongings

During the initial "reordering" process, framer-motion seems to incorrectly calculate the position of my items. This issue appears to be related to the fact that I am implementing this feature within a side panel, causing the items to be positioned at a di ...

What is the best way to display nested JSON in JSX within a React Native application?

I need help with rendering nested JSON inside my JSX. Below is the JSON response: [{ "data": { "total_students": 13, "seats": "", "categories": [{ "id": 28, "name": "Economy", "slug": "econom ...

Is there a way to verify if a Backbone.View is actively displayed in the DOM?

Is there a way to determine if a Backbone.View is currently rendered in the DOM, so that I do not need to rerender it? Any suggestions on how this can be achieved? Thanks and regards ...

What could be causing Map() to not display itemlist, even though the items are being rendered separately in ReactJS?

Recently, I encountered a problem while working on an app using ReactJS, Redux, and Firebase/Firestore. The issue arises when I fetch data from Firestore and store it in the ourPosts variable using useState([]) initialization. The strange thing is that wh ...

Ways to dynamically turn off caching for individual pages in Next.js?

I am seeking a way to differentiate between cached and non-cached posts. Each post contains a property, post.cached, which specifies whether the post should be cached or not. To render these posts, I am utilizing the getServerSideProps method. In my next. ...

Having issues with the CSS dropdown menu not activating when hovering

I am facing an issue with a simple menu that includes a dropdown feature upon hovering. The code works perfectly fine in Fiddle, however, it fails to work when running the entire page locally on IE. Can someone please assist me? (here's my code at fi ...

Exploring the Positives and Negatives of Using JQuery and Glow JavaScript Libraries

Is there a detailed analysis available that compares JQuery with the BBC's Glow JavaScript libraries? ...

Just starting out with Angular - facing issues with setting up in eclipse

I'm attempting to create a test Angular project in Eclipse by copying the three files from the Angular website https://docs.angularjs.org/api/ng/directive/ngController into my Eclipse project. I initially created it as a static web project and then co ...

What is the best way to save the result of a post ajax request in a variable?

I am attempting to make an AJAX call to one API, store the response in a variable, and then display that output to the user. So far, I have experimented with two different methods: var Fake = $.ajax({async:false, url:'http://9dbad321.ngrok.io/output ...

Removing the outer array of objects can be achieved by using a variety of

My goal was to eliminate the outer array of objects. I attempted to achieve this by using the code below: export class AppComponent implements OnInit { name = 'Angular'; EmployeeData=[ {"name": [{ "grade": &quo ...

Searching for a deeply nested JSON property with lodash

I am dealing with a JSON API response that has the following structure: [ { title: "top1", sections: [ { section_title: "section1", content: [ { content_title: "title1", content_id: "id1" ...

Jquery on method triggers a single event only

I am encountering an issue with adding and removing a class from an element using the on() method to handle click events. The code works fine on the first click, but subsequent clicks do not trigger the event anymore. Here is the code snippet: $(&apo ...

What is the quickest method to identify duplicate entries within a JavaScript array?

let items = ['test0','test2','test0']; In the scenario shown above, we have two duplicate elements with the value "test0". What is the most efficient way to check for this duplication? ...

Issue with CSS3 calc() validation: Invalid value provided for width, resulting in a parse error

Can you help me validate a CSS3 file that contains the following code snippet? width:calc(96.3% - 312px) When I try to validate it, I get this error message: Value Error : width Parse Error - 312px) My solution might be to implement a JavaScript func ...

Display a loading bar or prevent any user interface actions until the server has finished generating the file

I am currently developing a force directed layout using d3.js on data retrieved from an MS SQL server database. I'm creating the json file with a python script and running it on a local server using python -m SimpleHTTPServer. My goal is to establish ...

What is the best way to add a key to a JavaScript array while keeping it reactive in Vue.js?

If there's an array in the state: state: { users: [] }, Containing objects like: { id: 1, name: "some cool name" } To add them to the store using a mutator like users.push(user);, how can we ensure that instead of 0:{...}, it uses the ...

Excessive spacing in the <td> elements - TABLE

I am encountering some problems with my table layout. The spacing between the field names and text boxes appears to be too large. Could there be mistakes I'm making that are causing this issue? How can I minimize the gaps? Please refer to the image b ...