admin管理员组

文章数量:1392105

Inside a Jetpack Compose Text element I want to display content from a database, which contains HTML tags, for example, in this text, elements with <p>...</p> tag show a single space:

val lipsum="<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>"
Text(AnnotatedString.fromHtml(lipsum))

To achieve proper separation, I have to remove <p> and change </p> to \n\n, which I do with a replacement function:

fun String.marksAndHtml(): String {
    return this
        .replace("_", NBSP_SALMOS)
        .replace("§", BRS)
        .replace("~", BR)
        .replace("¦", NBSP_4)
        .replace("⊣", BR + NBSP_4)
        .replace("≀", BR + NBSP_4 + NBSP_4)
        .replace("~", BR)
        .replace("§", BRS)
        .replace("∸", BRS)
        .replace("</p>", BRS, true)
        .replace("<p>", "", true)
}

Text(AnnotatedString.fromHtml(lipsum.marksAndHtml()))

Is there a way to make the text between <p></p> have more space, without having to go through .replace?

Inside a Jetpack Compose Text element I want to display content from a database, which contains HTML tags, for example, in this text, elements with <p>...</p> tag show a single space:

val lipsum="<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>"
Text(AnnotatedString.fromHtml(lipsum))

To achieve proper separation, I have to remove <p> and change </p> to \n\n, which I do with a replacement function:

fun String.marksAndHtml(): String {
    return this
        .replace("_", NBSP_SALMOS)
        .replace("§", BRS)
        .replace("~", BR)
        .replace("¦", NBSP_4)
        .replace("⊣", BR + NBSP_4)
        .replace("≀", BR + NBSP_4 + NBSP_4)
        .replace("~", BR)
        .replace("§", BRS)
        .replace("∸", BRS)
        .replace("</p>", BRS, true)
        .replace("<p>", "", true)
}

Text(AnnotatedString.fromHtml(lipsum.marksAndHtml()))

Is there a way to make the text between <p></p> have more space, without having to go through .replace?

  • android
  • kotlin
  • android-jetpack-compose
Share Improve this question asked Mar 11 at 19:01 A. CedanoA. Cedano 1,00117 silver badges50 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

I recently had same issues and fixed with below code, it's a workaround and not the most straight way, but it gives more control.

@Composable
fun HtmlText(htmlText: String) {
    val context = LocalContext.current
    val spanned = remember(htmlText) {
        HtmlCompat.fromHtml(htmlText, HtmlCompat.FROM_HTML_MODE_COMPACT)
    }
    
    Text(
        text = spanned.toString().replace("\n", "").replace("<p>", "").replace("</p>", "\n\n"),
        modifier = Modifier.padding(vertical = 8.dp)
    )
}

本文标签：

版权声明：本文标题：android - Is there a way to display content between &lt;p&gt;&lt;p&gt; tags with more spacing in Jetpack Compose 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744775556a2624600.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。