如果我在本機反應中以某種方式標記，如何使字串的特定文本變為粗體？

伙計們對我的英語感到抱歉，這是我的第二語言。

所以有一個帶有以下文本的字串：

**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 中作業。

以前謝謝！

uj5u.com熱心網友回復：

您可以執行類似以下代碼的操作。

分步細節：

1. 拆分文本字串以**創建一個.arrstring
2. 里面的字串**...**將在arr陣列中的奇數索引處。
3. 因此，使用粗體Text組件將奇數索引處的字串和偶數索引處的其他字串（即在**...**塊之外）用簡單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

編輯：如果您希望粗體文本功能更智能，您可以檢查具有 dangling 的雜散文本 **。相同的代碼：

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

uj5u.com熱心網友回復：

您可以使用react-native-webview

<WebView
  originWhitelist={['*']}
  source={{ html: '<b>Lorem</b> ipsum dolor sit, amet consectetur adipisicing elit.' }}
/>

或任何用于安全 html 插入的庫

標籤：javascript反应反应式

上一篇：RN-作為道具的打字稿樣式

下一篇：如何在json檔案中撰寫操作？