如何添加填充到html内容使用Jsoup？ [英] How to add padding to html content using Jsoup?

问题描述

我使用Jsoup库来解析HTML内容。我使用以下代码为我的代码标签添加样式。

I am using the Jsoup library to parse HTML content. I am using the following code to add style to my code tags.

                Document doc = Jsoup.parse(html_open);
            doc.append(content);
            doc.append(html_close);
            webView1.getSettings().setJavaScriptEnabled(true);
            webView1.setInitialScale(getScale());
            webView1.getSettings().setAllowFileAccess(true);
            webView1.getSettings().setLoadsImagesAutomatically(true);
            webView1.setWebViewClient(
                    new WebViewClient() {

                        @Override
                        public void onPageFinished(WebView view, String url) {
                            String javascriptCode = "javascript:";
                            javascriptCode+="var elements=document.querySelectorAll(\"code\");";
                            javascriptCode+="var parent;";
                            javascriptCode+="var container;";
                            javascriptCode+="for(i in elements){";
                            javascriptCode+="container = document.createElement('div');";
                            javascriptCode+="parent = elements[i].parentElement;";
                            javascriptCode+="parent.replaceChild(container, elements[i]);";
                            javascriptCode+="container.appendChild(elements[i]);";
                            javascriptCode+="container.setAttribute(\"style\",\" white-space: nowrap; background-color: #EEEEEE;  padding-top: 4px;  padding-right: 4px;  padding-bottom: 4px;  padding-left: 4px;\");}";
                            webView1.loadUrl(javascriptCode);
                        }
                    }
            );
            webView1.loadDataWithBaseURL("", String.valueOf(doc), "text/html", "UTF-8", "");

这是我要解析的html代码。

This is the html code I am trying to parse.

<h2>Checking Data Features</h2>
<h3>Get the names of the columns of an object</h3>
<p><code><strong>names</strong>(salary_data)</code></p>
<p><code>&gt; names(salary_data)</code> <code>[1] "First_Name" "Last_Name" "Grade" <br />[4] "Location" "ba" "ms"</code></p>
<h3>Compactly display the internal structure of an R Object</h3>
<p><code><strong>str</strong>(salary_data)</code></p>
<p><code>&gt; <strong>str</strong>(salary_data)</code></p>
<p><code>'data.frame': 12 obs. of 6 variables:</code></p>
<p><code>&nbsp;$ First_Name: Factor w/ 12 levels "Aaron","Adela",..: 4 3 10 5 9 11 1 8 12 7 ... <br />&nbsp;$ Last_Name : Factor w/ 12 levels "Brown","Chavan",..: 1 12 5 6 8 2 3 7 4 10 ... <br />&nbsp;$ Grade : Factor w/ 2 levels "GR1","GR2": 1 2 1 2 1 2 1 2 1 2 ... <br />&nbsp;$ Location : Factor w/ 2 levels "DELHI","MUMBAI": 1 2 2 1 2 2 2 2 1 1 ... <br />&nbsp;$ ba : int 17990 12390 19250 14780 19235 13390 23280 13500 20660 13760 ... <br />&nbsp;$ ms : int 16070 6630 14960 9300 15200 6700 13490 10760 NA 13220 ...</code></p>
<p>Structure gives the following information:</p>
<ul>
<li>Type of the variable.</li>
<li>Number of levels of each factor.</li>
<li>Some values of the first few rows</li>
</ul>

我试图添加一个边框，背景颜色和padding到我的HTML代码标签。但是这段代码没有添加所需的风格到我的html内容。我在Android网页视图中显示这个内容。有一种方法可以添加所有的代码标签在一个div，然后风格的div。

I am trying to add a border, background-color and padding to the code tags in my html. But this code does not add the required style to my html content.I am displaying this content in android web view.Is there a way to add all the code tags inside a div and then style the div.

我的输出看起来像： -

My output looks something like :-

任何帮助或建议谢谢。

Any help or suggestion is appreciated.Thank you.

推荐答案

您可以使用javascript设置样式。在 webView1.loadDataWithBaseURL（...）之前添加以下代码

You could set the style using javascript. Add the following code before webView1.loadDataWithBaseURL(...)

webView1.setWebViewClient(
    new WebViewClient() {

        @Override
        public void onPageFinished(WebView view, String url) {
            String javascriptCode = "javascript:";
            javascriptCode+="var elements=document.querySelectorAll(\"code\");";
            javascriptCode+="var parent;";
            javascriptCode+="var container;";
            javascriptCode+="for(i in elements){";
            javascriptCode+="container = document.createElement('div');";
            javascriptCode+="parent = elements[i].parentElement;";
            javascriptCode+="parent.replaceChild(container, elements[i]);";
            javascriptCode+="container.appendChild(elements[i]);";
            javascriptCode+="container.setAttribute(\"style\",\"overflow:scroll; border: 1px solid black; background-color: #EEEEEE;  padding-top: 50px;  padding-right: 30px;  padding-bottom: 50px;  padding-left: 80px;\");}";
            webView1.loadUrl(javascriptCode);
        }
    }
);

这篇关于如何添加填充到html内容使用Jsoup？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！