javascript - 如果我以某种方式在 React Native 中标记，如何使字符串的特定文本变为粗体？

Question

伙计们，对不起我的英语，这是我的第二语言。

所以有一个包含以下文本的字符串:

**Lorem** ipsum dolor sit, amet consectetur adipisicing elit.

如何用 <b> 替换“**”字符和 </b>标签或 <div>和 </div>带有 React native 的标签，所以我可以像这样输出它:

<b>Lorem</b> ipsum dolor sit, amet consectetur adipisicing elit.

我尝试用 ** 开始粗体文本并以 /* 结尾, 然后替换 **与 <b>和 /*与 </b>使用替换方法:

str.replace("/*", "</b>").replace("**", "<b>")

但我只有这样的字符串:

<b>Lorem</b> ipsum dolor sit, amet consectetur adipisicing elit. .

这是有问题的，因为我使用的是 React native，它只输出类似字符串的内容。它适用于 PHP。

先谢谢了!

Answer 1

您可以执行类似以下代码的操作。

逐步详细信息:

1. 围绕 ** 拆分文本字符串以创建 string 数组 arr。
2. **...** 中的字符串将位于 arr 数组中的奇数索引处。
3. 因此，使用粗体样式的 Text 组件在奇数索引处包装字符串，在偶数索引处包装其他字符串(即在 **...** block 之外) 和简单的 Text 组件。
4. 将这些 Text 组件附加到一个数组。
5. 在另一个 Text 组件中呈现此 Text 组件数组，以将所有组件显示为同一行上的单个组件。

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
  app: {
    width: "100%"
  },
  bold: {
    fontWeight: "bold"
  }
});

function App() {
  const text =
    "**Lorem** ipsum dolor sit, *amet consectetur **adipisicing** elit.";

  function getSmartBold() {
    // Split the text around **
    const arr = text.split("**");

    // Here we will store an array of Text components
    const newTextArr = [];

    // Loop over split text
    arr.forEach((element, index) => {
      // If its an odd element then it is inside **...** block
      if (index % 2 !== 0) {
        // Wrap with bold text style
        const newElement = <Text style={styles.bold}>{element}</Text>;
        newTextArr.push(newElement);
      } else {
        // Simple Text
        const newElement = <Text>{element}</Text>;
        newTextArr.push(newElement);
      }
    });

    return newTextArr;
  }

  return (
    <View style={styles.app}>
      <Text>{getSmartBold()}</Text>
    </View>
  );
}

export default App;

CodeSandbox 链接:https://codesandbox.io/s/happy-cori-oex9kg?file=/src/App.js

---

编辑:如果您希望粗体文本功能更智能，您可以检查有悬空的杂散文本 **。相同的代码:

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
  app: {
    width: "100%"
  },
  bold: {
    fontWeight: "bold"
  }
});

function getSmartBoldText(text, boldWrapperText = "**") {
  // Split the text around **
  const splitStringArr = text.split(boldWrapperText);

  console.debug(`splitStringArr = `, splitStringArr);

  // Here we will store an array of Text components
  const textComponentsArr = [];

  // Loop over split text
  splitStringArr.forEach((string, index) => {
    // If its an odd element then it is inside **...** block
    // And is not a word surrounded by stray ** (without any closing)
    if (index % 2 !== 0 && index !== splitStringArr.length - 1) {
      // Wrap with bold text style
      const boldText = <Text style={styles.bold}>{string}</Text>;
      textComponentsArr.push(boldText);
    } else {
      // Simple Text

      // If it's stray element, append ** to it
      if (index === splitStringArr.length - 2) {
        string = string + boldWrapperText;
      }

      const normalText = <Text>{string}</Text>;
      textComponentsArr.push(normalText);
    }
  });

  return textComponentsArr;
}

function App() {
  const text =
    "**Lorem ipsum dolor sit, *amet consectetur **adipisicing **elit.";

  return (
    <View style={styles.app}>
      <Text>{getSmartBoldText(text, "**")}</Text>
    </View>
  );
}

export default App;

用于更智能的粗体文本功能的 CodeSandbox 链接:https://codesandbox.io/s/boring-haslett-238nt3?file=/src/App.js