时间戳

首页 > 解决方案 > 将 react-native 中的多个 html-tags 替换为 Text

react-native - 将 react-native 中的多个 html-tags 替换为 Text

问题描述

我有一个包含多个字符串的 JSON 文件，例如，每个字符串通常包含一个 a-tag。我设法替换了最后一个 A 标记，但我需要能够在字符串中进行更改。

我的地图功能如下所示：

            <Text style={styles.text}>
           
               {this.state.selectedData.map((item) =>(
                   <Text style={{width:ScreenWidth}}>{this.rerenderHTML(item)}</Text>
     
                ))}
            </Text>

我的功能如下所示：

rerenderHTML(item){

    if (item.indexOf('<i>') > -1)
    {
        var newItem =  item.substring(
            item.lastIndexOf("<i>") + 3, 
            item.lastIndexOf("</i>")
        );

        console.log("italic:"+newItem)

        var itemItalic = <Text style={{fontStyle:'italic'}}>{newItem}{"\n"}{"\n"}</Text>

            return itemItalic
     
    }else if(item.indexOf('<a') > -1){



            var  newItem =  item.substring(
                item.lastIndexOf('href="') + 6, 
                item.lastIndexOf('"')-16
            );
            
            var firstTillSplit= item.split("<a");
            var afterSplit= item.split("</a>");


            var itemItalic = <Text> {firstTillSplit[0]} <Text style={{color:'red'}} onPress={()=>{Linking.openURL('http://plaatsengids.nl'+newItem)}}>{newItem.replace("/",'')}</Text> {afterSplit[1]} </Text>
        
            var replaceLink = item.replace(/<a[^>]*>|<\/a>/g, "link"); // a try for deleting the a-tag but does only remove the HTML not the text and can't replace with component

            return  itemItalic
    }else{
        return <Text>{item}</Text>;
    }

}

Json 文件如下所示：

"text": [
                     "Buurtschap 't Heeske valt, ook voor de postadressen, onder het dorp <a href=\"/maasbree\" target=\"_blank\">Maasbree</a> <a href=\"/test2\" target=\"_blank\">test 2</a>.",
                     "Maalbeek is een buurtschap in de provincie Limburg, in de streek Noord-Limburg, gemeente Venlo. T/m 2000 gemeente Belfeld.",
                     "De buurtschap Maalbeek valt, ook voor de postadressen, onder het dorp Belfeld.",
                     "De buurtschap heeft geen plaatsnaamborden en wordt ook niet in atlassen of plaatsenlijsten vermeld, maar is nog wel degelijk een buurtschap (zo is ons door inwoners uit de regio gemeld) en dus plaats(naam).",
                  ]

结果是最后一个 a-tag 放置在第一位，因此“test2”和最后一个 A-tag 仍然可见。在这个例子中，必须首先出现“Maasbree”，然后是“test2”

我知道可以使用 A 标记打开 web 视图，但这在我的项目中是不可能的。

标签： react-native

解决方案

您可能需要一些正则表达式来完成工作。以下是您可以搜索/替换/操作该文本的一些方法的示例：

const str = "Buurtschap 't Heeske valt, ook voor de postadressen, onder het dorp <a href=\"/maasbree\" target=\"_blank\">Maasbree</a> <a href=\"/test2\" target=\"_blank\">test 2</a>.";

const regex = RegExp(/<a\s+([^>]*)href="([^"]*)".*?>(.*?)<\/a>/gm);
console.log(Array.from(str.matchAll(regex)))
console.log(str.replace(/<a\s+([^>]*)href="([^"]*)".*?>(.*?)<\/a>/gm, "$1 Link $2"));
console.log(str.replace(/<a\s+([^>]*)href="([^"]*)".*?>(.*?)<\/a>/gm, "LINK"));

产生：

[['<a href=\'/maasbree\' target=\'_blank\'>Maasbree</a>','','/maasbree','Maasbree'],['<a href=\'/test2\' target=\'_blank\'>test 2</a>','','/test2','test 2']]
"Buurtschap 't Heeske valt, ook voor de postadressen, onder het dorp  Link /maasbree  Link /test2."
"Buurtschap 't Heeske valt, ook voor de postadressen, onder het dorp LINK LINK."

我使用的正则表达式是对这些答案的修改：Regular expression for anchor tag with all attributes

然后，我用它做一些事情：

  1. 如果您需要捕获链接或文本，我会向您展示使用的结果matchAll
  2. 我向您展示了不同捕获组（$1 和 $2）的替换
  3. 我展示了用这个词替换整个事情LINK。

希望这些可以让您开始以您需要的方式处理文本。

更新以获取您在比赛中寻找的特定条款：

const matches = Array.from(str.matchAll(regex))
const firstLinkHref = matches[0][2]; // == /maasbree
const firstLinkText = matches[0][3]; // == Maasbree

推荐阅读