Changing colour of substring from string in react

Question

I want to change color of a particular substring from a post. eg:-

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 above example is the post then i want to change the style of the keywords. I am using Next.js.

function handleBody(){
    var arr1=[],arr2=[];
    for(let i=0;i<post.body.length;i++){
        if(post.body[i]==="#"){
          arr1.push(i);
        }
        if(arr1.length!==arr2.length && post.body[i]==" " ){
            arr2.push(i);
        }
    }
    for(let i=0;i<post.body.length;i++){
      const trial2 =  post.body.substring(arr1[i], arr2[i])
      const trial =  post.body.substring(arr1[i], arr2[i]).style.color ="blue";

      post.body.replace(trial2, trial)
    }
    return post.body
  }

I have tried as above but its giving an error

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

post.body.substring() will return a string. Strings are not DOM elements, and does not have DOM properties like style — Benjamhw
– Benjamhw, Commented Apr 1, 2023 at 11:14

SamHoque · Accepted Answer · 2023-04-01 11:10:53Z

1

You are trying to set style of a string type... which isn't possible, instead you can wrap the substrings in a span, here is a more optimized function for what you want to do.

function handleBody() {
  let body = post.body;
  let keywords = body.match(/#[^\s]+/g); // extract all hashtags

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

  // wrap each keyword in a span with a class or style
  keywords.forEach(keyword => {
    body = body.replace(keyword, `<span style="color: blue">${keyword}</span>`);
  });

  return body;
}

answered Apr 1, 2023 at 11:10

SamHoque

3,1743 gold badges17 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vanortton · Accepted Answer · 2023-04-01 11:19:05Z

You are trying to change styles for something that is not an HTML element.

You can use regex to select the words that begin with '#' and then replace them with a span containing the word.

Then you can change the color of the content of the span with CSS or with JS.

Here is an example:

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>

Benjamhw · Accepted Answer · 2023-04-01 11:17:51Z

0

post.body.substring() will return a string. Strings are not DOM elements, and does not have DOM properties like style

In order to change the color of any substrings in your text, you would need to wrap them in an element tag, such as <span>. You could then add a style or className to these span elements.

answered Apr 1, 2023 at 11:17

Benjamhw

978 bronze badges

Comments

Pedro Borges Jr · Accepted Answer · 2023-11-21 06:58:53Z

0

You could try this library, is does exactly what you are expecting. It matches a regex pattern and style the way you want. It has some predefined patterns and you can create your own.

Lets say that your keywords are wrapped in square brackets or curly brackets, like this:

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

after installing the library using

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

You can wrap your text like this

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

answered Nov 21, 2023 at 6:58

Pedro Borges Jr

1054 bronze badges

Collectives™ on Stack Overflow

Changing colour of substring from string in react

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related