Question

我需要将粗体文本based on the index value替换为{index}，并且该词应为粗体。

示例：

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

输出：

您和您的家人很棒。

Answer 1

这是一个简单的示例。

希望对您有帮助！

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));

请注意，您可以传递任何您想适合本机的东西，也可以传递任何东西。在这里，我传递带有<b>标签的简单HTML，这里重要的是replace函数。让它返回您想要的任何内容。

使用react-native，您可能需要使用以下内容：

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>;
};

Answer 2

如果您有一个字符串You and Your Family are great和一个以粗体显示[0, 1]的元素数组，则可以执行以下操作：

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);

然后呈现toReturn值。

Answer 3

这是我想出的一个版本，如果您想在react / javascript中为单词或单个字符的样式设置样式。

replaceAt( yourArrayOfIndexes, yourString/orArrayOfStrings )

工作示例：https://codesandbox.io/s/ov7zxp9mjq

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

这是另一种替代方法

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('');
}

还有一个...

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;
}

Answer 4

尝试这个react-native-highlight-words
非常简单实用！
这是文档中的用法示例：

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?"
  />

在文本中加粗特定单词-React Native？

4 个答案: