Adjusting the color of a specific part of a text within a string using

Question

Adjusting the color of a specific part of a text within a string using

I am trying to update the color of specific keywords within a post.

For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor lacinia urna eget gravida. Quisque magna nulla, fermentum fermentum od
#keyword1 #keyword2 #keyword3 #keyword4 #keyword5

If the above example is the content of the post, I want to change the styling of the keywords using Next.js.

function applyStylingToKeywords() {
    var startIndices = [];
    var endIndices = [];

    for (let i = 0; i < post.body.length; i++) {
        if (post.body[i] === "#") {
            startIndices.push(i);
        }
        if (startIndices.length !== endIndices.length && post.body[i] == " ") {
            endIndices.push(i);
        }
    }

    for (let i = 0; i < startIndices.length; i++) {
      const word = post.body.substring(startIndices[i], endIndices[i]);
      const styledWord = word.style.color = "blue";

      post.body.replace(word, styledWord);
    }

    return post.body;
}

I attempted the code above but encountered an error.

TypeError: Cannot set properties of undefined (setting 'color')

javascript html css reactjs next.js

Answer 1

Answer №1

It seems like you are attempting to apply a style to a string, which is not possible. Instead, consider wrapping the substrings in a span. Below is a more optimized function that achieves what you want to do.

function updateContent() {
  let content = article.content;
  let tags = content.match(/#[^\s]+/g); // extract all hashtags

  if (!tags) {
    // no keywords found, return original content
    return content;
  }

  // wrap each tag in a span with a specific class or style
  tags.forEach(tag => {
    content = content.replace(tag, `<span style="color: green">${tag}</span>`);
  });

  return content;
}

Answer 2

It seems like you are attempting to apply a style to a string, which is not possible. Instead, consider wrapping the substrings in a span. Below is a more optimized function that achieves what you want to do.

function updateContent() {
  let content = article.content;
  let tags = content.match(/#[^\s]+/g); // extract all hashtags

  if (!tags) {
    // no keywords found, return original content
    return content;
  }

  // wrap each tag in a span with a specific class or style
  tags.forEach(tag => {
    content = content.replace(tag, `<span style="color: green">${tag}</span>`);
  });

  return content;
}

Answer 3

Answer №2

If you're attempting to modify styles for something that isn't an HTML element, you may encounter some challenges.

One workaround is to utilize regex to identify words starting with '#' and then substitute them with a span containing the word.

Afterwards, you can adjust the color of the span's content using CSS or JavaScript.

Here's a sample code snippet:

let postBody = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor lacinia urna eget gravida. Quisque magna nulla, fermentum fermentum od #keyword1 #keyword2 #keyword3 #keyword4 #keyword5'

const regex = /#[a-zA-Z0-9]+/g;
const color = "blue";

postBody = postBody.replace(regex, `<span style="color: ${color}">$&</span>`)

document.getElementById('postBody').innerHTML = postBody

<div id="postBody"></div>

Answer 4

If you're attempting to modify styles for something that isn't an HTML element, you may encounter some challenges.

One workaround is to utilize regex to identify words starting with '#' and then substitute them with a span containing the word.

Afterwards, you can adjust the color of the span's content using CSS or JavaScript.

Here's a sample code snippet:

let postBody = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor lacinia urna eget gravida. Quisque magna nulla, fermentum fermentum od #keyword1 #keyword2 #keyword3 #keyword4 #keyword5'

const regex = /#[a-zA-Z0-9]+/g;
const color = "blue";

postBody = postBody.replace(regex, `<span style="color: ${color}">$&</span>`)

document.getElementById('postBody').innerHTML = postBody

<div id="postBody"></div>

Answer 5

Answer №3

post.body.substring() will give back a string. These strings are not considered as DOM elements and do not possess any DOM properties like style

To modify the color of specific substrings within your text, you must enclose them in an element tag like <span>. Then, you can apply a style or className to these span elements.

Answer 6

post.body.substring() will give back a string. These strings are not considered as DOM elements and do not possess any DOM properties like style

To modify the color of specific substrings within your text, you must enclose them in an element tag like <span>. Then, you can apply a style or className to these span elements.

Answer 7

Answer №4

A great solution for your needs is this amazing library that perfectly aligns with your expectations. Not only does it match a regex pattern, but it also allows you to style the text exactly how you desire. With predefined patterns and the ability to customize your own, the possibilities are endless.

Imagine if your keywords were enclosed in square brackets or curly brackets, like so:

const sentence = "this is your sentence and here is [#keyword1] and [#keyword2];

Once you have installed the library by running either of these commands:

npm install react-substring-styler
or
yarn add react-substring-styler

You can easily format your text in the following way:

   <HighlightedText pattern={[{
      type: "squareBrackets",
      style: {
        color: "purple",
      }]}>{sentence}
   </HighlightedText>

Answer 8

A great solution for your needs is this amazing library that perfectly aligns with your expectations. Not only does it match a regex pattern, but it also allows you to style the text exactly how you desire. With predefined patterns and the ability to customize your own, the possibilities are endless.

Imagine if your keywords were enclosed in square brackets or curly brackets, like so:

const sentence = "this is your sentence and here is [#keyword1] and [#keyword2];

Once you have installed the library by running either of these commands:

npm install react-substring-styler
or
yarn add react-substring-styler

You can easily format your text in the following way:

   <HighlightedText pattern={[{
      type: "squareBrackets",
      style: {
        color: "purple",
      }]}>{sentence}
   </HighlightedText>

Adjusting the color of a specific part of a text within a string using

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Incorporating a JavaScript file into Angular

When trying to set up Plaiceholder in a Next.js/Webpack 5 environment, you may encounter the following issue: "Error: Module not found - Can't resolve 'child_process

To ensure each row in the data grid component is distinct, it is necessary for them to possess a unique identifier property. Another option is to utilize the getRowId

Utilize environment variables to access system information when constructing an Angular 2 application

How can I target all ul elements except those contained within a div with a specific class using CSS?

(node:2824) UnhandledPromiseRejectionWarning: ReferenceError: The variable "role" has not been declared

Design a custom Bootstrap dropdown using an input[type="text"] element

What could be causing the issue of loading text not appearing in Vue.js?

The React Native Android app encountered an error loading the JS bundle: updates made to index.android.js are not reflecting in the generated APK file

Having trouble retrieving data from redux toolkit using typescript

How to add a design to an image using a fabric pattern on a shirt

Show a single item from the database sequentially and cycle through the rest in a timed loop

Achieve a perfectly centered and responsive image placement on a webpage accompanied by a countdown timer

Giant Slide - navigate directly to a particular slide using a link

Display an iframe using React in multiple areas across the app with the same state

jquery animation does not reset after event occurs

Is relying on getState in Redux considered clunky or ineffective?

Every time Fetch() is called in Node.js, a fresh Express session is established

Techniques for parsing a String in Objective-C

What is the best location to initialize a fresh instance of the Firebase database?