Question

My android application downloads articles formatted with HTML tags and displays them in the WebView. The problem I have got is that some articles have auto generated graphs which are quite big and they don’t fit the webview. (Please note that I don’t want to use horizontal scrolling).
My idea is to save every occurrence of the ‘div’ tag that holds such a graph and then replace it with "<a href='unique_id_of_div_tag'>Show graph</a>" link.
Having something like this will display link instead of the graph. When user click on it would open new activity with graph.(I would handle user clicks with WebViewClient and shouldOverrideUrlLoading method)

The ‘div’ tag which contains the grap info has similar structure to the following:

<div class="graph">
   <div>Header</div>
   <div>Graph body</div>
   <div>Graph footer</div>
</div>

(and I don’t have a control over it)

To sum up, I want to be able to save content of the<div class="graph">...</div> and replace it with <a href="">...</a>. How can I achieve that?

Thanks,
marqs

Answer 1

This can be done by using the following:

Pattern tags = Pattern.compile ("</?[^>]+>");
Matcher match = tags.matcher (yourContent); // here you specify the string you want to modify (HTML)
String result = match.replaceAll("");

This way you remove any tags, but keep the content in your HTML string.

Read more about Pattern and Matcher here.

EDIT:

To remove only links (anchors) from the string, write the following instead of the first line:

Pattern tags = Pattern.compile ("</?[a]{1}[^>]+>");

You can remove an arbitrary string by just replacing the regular expression with another one.

EDIT2:

I completely misunderstood your question. Two times 🙂

You can remove all <div class="graph"> tags, by doing something like this:

    Pattern tags = Pattern.compile ("<div class=\"graph\">[^(</div>)]+</div>");

Afterwards, replace all those [[DIV]] placeholders with whatever you want. However, this approach will not work if you have a div with a graph AND some content inside it, though. So in that case, I think it will be best to split all your content on the <div class=graph> and then inspect every DIV inside every element to check if there is a graph inside it.

I don’t know if this can be done with regular expressions alone, so a more tedious and bug-prone approach will have to be undertaken. But you do want something really specific, so that’s something you should expect sometimes 🙂