如何在传入的文本中突出显示某些单词？

Posted 2023-02-16

【中文标题】如何在传入的文本中突出显示某些单词？

【英文标题】：How can I make certain words highlighted in incoming text?

【发布时间】：2022-01-07 16:33:27

【问题描述】：

我是应用程序开发的新手，并且在 React Native 中工作。我希望文本中某些单词的颜色为红色且可点击，如下图所示。您可以在图片下方看到传入的数据。 data.highlight 中的文字在文本中首次出现时应为红色且可点击。虽然图中有几个“假人”，但只有第一个是红色的。我试图这样做，但我没有工作，也无法让它循环。当我这样做时，一切都是不变的。传入的数据可能会发生变化，例如 data.highlight 中可能有 3 个以上的单词。我怎样才能以实际的方式做到这一点？

const data = 
    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, dummy when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    highlight: ["dummy", "standard", "since"]

import React from "react"
import  Text, View  from "react-native"


const data = 
    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, dummy when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    highlight: ["dummy", "standard", "since"]



const WordBoxText = () => 

    // for first highlight word
    const convertData1 = data.text.split(data.highlight[0])
    let converted = []
    for (i = 1; i < convertData1.length; i++) 
        converted.push(convertData1[i])
    
    const rest1 = converted.join(data.highlight[0]) // maybe it will useful
    const Highlighter = <Text style= color: "red" >data.highlight[0]</Text>


    // for first highlight word
    const convertData2 = data.text.split(data.highlight[1])
    let converted2 = []
    for (i = 1; i < convertData2.length; i++) 
        converted2.push(convertData2[i])
    
    const rest2 = converted.join(data.highlight[1]) // maybe it will useful
    const Highlighter2 = <Text style= color: "red" >data.highlight[1]</Text>


    // for first highlight word
    const convertData3 = data.text.split(data.highlight[2])
    let converted3 = []
    for (i = 1; i < convertData3.length; i++) 
        converted3.push(convertData3[i])
    
    const rest3 = converted.join(data.highlight[2]) //sentences from the last word
    const Highlighter3 = <Text style= color: "red" >data.highlight[2]</Text>


    const Final = () => 
        return (
            <Text>
                convertData1[0] Highlighter
                convertData2[0] Highlighter2
                convertData3[0] Highlighter3 rest3 </Text>
        )
    

    return (
        <View style= marginTop: 100 >
            <Final></Final>
        </View>
    )


export default WordBoxText

【问题讨论】：

你可以举个例子codesandbox

您可以在字符串中使用 html 标签，然后使用 css 属性。

感谢您的回复，我找到了解决方案。谢谢！ @decpk

【参考方案1】：

根据@decpk 的回答，我找到了如下解决方案

import React,  useRef  from "react"
import  Text  from "react-native"


const data = 
    title: "Journey to Self-Confidence",
    text: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.`,
    highlight: ["dummy",
        "standard",
        "since"]



const Screen = () => 

    const highlighted = useRef([])

    const HighlightText = (word, index) => 

        highlighted.current = [...highlighted.current, word]

        return (
            <Text style= color: 'red'  key=index>word </Text>
        )
    

    return (
        <Text>
            data.text
                .split(" ")
                .map((word, index) =>
                    data.highlight.includes(word) ?
                        highlighted.current.includes(word) ?
                            <Text style= color: 'black'  key=index>word </Text>
                            :
                            HighlightText(word, index)
                        :
                        <Text style= color: 'black'  key=index>word </Text>
                )
            
        </Text>
    )


export default Screen