需要帮助解析html代码，按顺序排列视图

Question

我有一个 html 代码，放入一个我想解析的字符串，然后将其转换为不同的视图并在 Android 中按顺序显示每个视图..

HTML 示例：

String htmlText = " 
<div class = "quote">
<br>
<br>
Hello how are you today.
<p>
I am fine thank you.
<br>
<br>
<img src="http://testing.jpg"/>
<br>
<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
<br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
<br>
<img src="http://testing2.jpg"/>
</div>";

对于这种情况，我想在 android 中显示各自的 imageviews 和 textviews。但所有这些都必须按升序排列。这很重要，因为内容每次都是动态的，图像可以出现在文本之前/之后等等。

我能够将内容转换为各自的视图，例如将文本设置为 textview，所以这不是问题。我的问题是如何解析 HTML 代码以使内容按顺序显示？

我能想到的唯一方法是将 html 拆分为行，然后检查它是图像 URL 还是文本。然后我会使用 Jsoup 解析并放入各自的视图中。

String[] parts = htmlText.split(System.getProperty("line.separator"));

for(int i = 0; i<parts.length;i++){

  if(parts[i].contains("<img src=\"")){
     Document doc = Jsoup.parse(parts[i]);
     String imgSrc = doc.getElementsByTag("img").attr("src");

     //function to convert imageUrl to imageView
     converttoImageView(imgSrc);
  }
  else{

     Document doc2 = Jsoup.parse(parts[i]);
     converttoTextView(doc2.text());
  }

}

private void converttoTextView(String text){


  View messageView = LayoutInflater.from(((PostViewHolder) holder).message_row.getContext()).inflate(R.layout.reply_message, ((PostViewHolder) holder).message_row, false);

  TextView message_textview = (TextView) messageView.findViewById(R.id.reply_message);
  message_textview.setText(text);


  ((PostViewHolder) holder).message_row.addView(messageView);

}

这样做的问题是，每个文本都是逐行分隔的，并且一旦调用该函数，就会动态创建文本视图。我想让 textview 可选择，以便用户可以复制和粘贴。但我无法选择整个文本。我只能为每个 textview 选择 textview。

我得到的输出

<TextView> Hello how are you today</TextView>
<TextView> I am fine thank you </TextView>
<ImageView>testing.jpg</ImageView>
<TextView>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</TextView>
<TextView>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</TextView>
<ImageView>testing2.jpg</ImageView>

预期输出

<TextView> Hello how are you today \n\n I am fine thank you </TextView>
<ImageView>testing.jpg</ImageView>
<TextView>Lorem Ipsum is simply dummy text of the printing and typesetting industry.\nLorem Ipsum has been the industry's standard dummy text ever since the 1500s.</TextView>
<ImageView>testing2.jpg</ImageView>

Answer 1

您现在可能已经弄清楚了，但如果您仍在寻找解决方案，请查看此库 https://github.com/square1-io/rich-text-android。

特别是你可以解析你的 HTML 字符串调用：

      RichDocument document = RichTextV2.fromHtml(context,
                html, new RichTextV2.DefaultStyle(context) {
            @Override
            public boolean extractImages(){ // this will extract img tags from content
                return true;
            }
        });

然后您可以执行以下操作：

  for(DocumentElement element : document.getElements()){

        if(element instanceof RichTextDocumentElement){
            String content = ((RichTextDocumentElement)element).contentString();
            //set content to your TextView
        }
        if(element instanceof ImageDocumentElement){
            String imageUrl = ((ImageDocumentElement)element).getImageURL();
            //do whatever you want 
        }

    }

Answer 2

我认为你可以编辑for循环，你可以记录文本，并在找到<img>时将其转换为TextView

比如：

StringBuilder text = new StringBuilder();
for(int i = 0; i<parts.length;i++){
    if(parts[i].contains("<img src=\"")){
        if (!text.toString().equals("")) {
            //when find img, judge the text equals empty, if not, convert to TextView
            converttoTextView(text.toString());
            //clean the text after convert
            text.delete(0, text.length());
        }

        Document doc = Jsoup.parse(parts[i]);
        String imgSrc = doc.getElementsByTag("img").attr("src");

        //function to convert imageUrl to imageView
        converttoImageView(imgSrc);
    } else {
        Document doc2 = Jsoup.parse(parts[i]);
        //converttoTextView(doc2.text());

        //append the doc2 to text, but not execute convert method, just record
        text.append(doc2+"/n");
    }

}

if (!text.toString().equals("")) {
    //when find img, judge the text equals empty, if not, convert to TextView
    converttoTextView(text.toString());
    //clean the text after convert
    text.delete(0, text.length());
}

希望它对您有所帮助，这只是基于您的代码的一种简单方法。