I need to replace the boldText based on the index value in the place of {index} and that word should be bold.

Example:

 {
  sentence: {0} and {1} are great
  boldText: ['You', 'Your Family']
 }

output:

You and Your Family are great.

I need to replace the boldText based on the index value in the place of {index} and that word should be bold.

Example:

 {
  sentence: {0} and {1} are great
  boldText: ['You', 'Your Family']
 }

output:

You and Your Family are great.

• javascript
• reactjs
• react-native

4 Answers 4

Here is a simple example to do that.

Hope that it will help you!

const sample = {
  sentence: '{0} and {1} are great',
  boldText: ['You', 'Your Family']
};

const applyBoldStyle = text => text.sentence.replace(/\{(\d+)\}/g, (match, i) => `<b>${text.boldText[i]}</b>`);

console.log(applyBoldStyle(sample));

Please note that you can pass whatever you want to fit react-native or whatever. Here I pass simple HTML with <b> tag, what matters here is the replace function. Make it return whatever you want.

With react-native, you probably want to use the following:

const sample = {
  sentence: '{0} and {1} are great',
  boldText: ['You', 'Your Family']
};

const applyBoldStyle = text => {
  let numberOfItemsAdded = 0;
  const result = text.sentence.split(/\{\d+\}/);
  text.boldText.forEach((boldText, i) => result.splice(++numberOfItemsAdded + i, 0, <Text style={{fontWeight: 'bold'}}>{boldText}</Text>););
  return <Text>{result}</Text>;
};

If you have an string You and Your Family are great and an array of element to bold [0, 1], you can do something like this:

const   string = 'You and Your Family are great';
const   myArray = [0, 2];
const   mySplitedString = string.split(' ');
const   toReturn = mySplitedString.map((eachWord, index) =>
{
    if (myArray.indexOf(index) !== -1)
        return (<Text key={`text_${index}`} style={{fontWeight: '900'}}>{eachWord}</Text>);
    return (<Text key={`text_${index}`}>{eachWord}</Text>);
})
return (toReturn);

And then render the toReturn value.

Try this react-native-highlight-words
It's so simple and useful!
Here is the usage example from the documentation:

import Highlighter from 'react-native-highlight-words';

  <Highlighter
      highlightStyle={{backgroundColor: 'yellow'}}
      searchWords={['and', 'or', 'the']}
      textToHighlight="The dog is chasing the cat. Or perhaps they are just playing?"
  />

Here is a version I came up with if you want to style words or individual characters at their index in react/javascript.

replaceAt( yourArrayOfIndexes, yourString/orArrayOfStrings ) 

Working example: https://codesandbox.io/s/ov7zxp9mjq

function replaceAt(indexArray, [...string]) {
    const replaceValue = i => string[i] = <b>{string[i]}</b>;
    indexArray.forEach(replaceValue);
    return string;
}

And here is another alternate method

function replaceAt(indexArray, [...string]) {
    const startTag = '<b>';
    const endTag = '</b>';
    const tagLetter = i => string.splice(i, 1, startTag + string[i] + endTag);
    indexArray.forEach(tagLetter);
    return string.join('');
}

And another...

function replaceAt(indexArray, [...string]) {
    for (let i = 0; i < indexArray.length; i++) {
        string = Object.assign(string, {
          [indexArray[i]]: <b>{string[indexArray[i]]}</b>
        });
    }
    return string;
}