伙计们,对不起我的英语,这是我的第二语言。
所以有一个包含以下文本的字符串:
**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。
先谢谢了!
最佳答案
您可以执行类似以下代码的操作。
逐步详细信息:
- 围绕
**
拆分文本字符串以创建string
数组arr
。 **...**
中的字符串将位于arr
数组中的奇数索引处。- 因此,使用粗体样式的
Text
组件在奇数索引处包装字符串,在偶数索引处包装其他字符串(即在**...**
block 之外) 和简单的Text
组件。 - 将这些
Text
组件附加到一个数组。 - 在另一个
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
关于javascript - 如果我以某种方式在 React Native 中标记,如何使字符串的特定文本变为粗体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74220684/