Discover the method for obtaining the data of a specific <div> element based on its ID through JavaScript in an Android WebView

Question

Discover the method for obtaining the data of a specific <div> element based on its ID through JavaScript in an Android WebView

Hello, I am new to web development so please bear with me if my question seems naive. I am currently working on a script using html, css, and js to display a text editor in a webView. The editor is being displayed without any issues, but now I'm facing difficulty in retrieving the content of the particular element with the id "myEditor". Can someone assist me in resolving this problem?

Here is the HTML code snippet:

<html>
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
 <body>
  <style>
    #editorContainer {
        max-width: 600px;
        margin: auto;
    }
    
    ...

In the Java code block below, the current implementation returns the entire script of the webView. I am unsure how to modify it to only retrieve the desired result.

Java Code:

webView.evaluateJavascript(
                    "(function() { return ('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>'); })();",
                    new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String html) {

                        }
                    });

javascript android html css webview

Answer 1

Answer №1

For utilizing the Jsoup Library, visit: https://github.com/jhy/jsoup

Document document = Jsoup.parse(html);
Element sampleDiv = document.getElementById("sampleDiv");

Illustration:

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class JsoupTester {
   public static void main(String[] args) {

      String html = "<html><head><title>Sample Title</title></head>"
         + "<body>"
         + "<p>Sample Content</p>"
         + "<div id='sampleDiv'><a href='www.google.com'>Google</a>"
         + "<h3><a>Sample</a><h3>"
         +"</div>"
         + "<div id='imageDiv' class='header'><img name='google' src='google.png' />"
         + "<img name='yahoo' src='yahoo.jpg' />"
         +"</div>"
         +"</body></html>";
      Document document = Jsoup.parse(html);

      //a with href
      Elements links = document.select("a[href]");

      for (Element link : links) {
         System.out.println("Href: " + link.attr("href"));
         System.out.println("Text: " + link.text());
      }

      // img with src ending .png
      Elements pngs = document.select("img[src$=.png]");

      for (Element png : pngs) {
         System.out.println("Name: " + png.attr("name"));
      }

      // div with class=header
      Element headerDiv = document.select("div.header").first();
      System.out.println("Id: " + headerDiv.id());

      // direct a after h3
      Elements sampleLinks = document.select("h3 > a"); 

      for (Element link : sampleLinks) {
         System.out.println("Text: " + link.text());
      }
   }
}

Outcome:

Href: www.google.com
Text: Google
Name: google
Id: imageDiv
Text: Sample

Answer 2

For utilizing the Jsoup Library, visit: https://github.com/jhy/jsoup

Document document = Jsoup.parse(html);
Element sampleDiv = document.getElementById("sampleDiv");

Illustration:

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class JsoupTester {
   public static void main(String[] args) {

      String html = "<html><head><title>Sample Title</title></head>"
         + "<body>"
         + "<p>Sample Content</p>"
         + "<div id='sampleDiv'><a href='www.google.com'>Google</a>"
         + "<h3><a>Sample</a><h3>"
         +"</div>"
         + "<div id='imageDiv' class='header'><img name='google' src='google.png' />"
         + "<img name='yahoo' src='yahoo.jpg' />"
         +"</div>"
         +"</body></html>";
      Document document = Jsoup.parse(html);

      //a with href
      Elements links = document.select("a[href]");

      for (Element link : links) {
         System.out.println("Href: " + link.attr("href"));
         System.out.println("Text: " + link.text());
      }

      // img with src ending .png
      Elements pngs = document.select("img[src$=.png]");

      for (Element png : pngs) {
         System.out.println("Name: " + png.attr("name"));
      }

      // div with class=header
      Element headerDiv = document.select("div.header").first();
      System.out.println("Id: " + headerDiv.id());

      // direct a after h3
      Elements sampleLinks = document.select("h3 > a"); 

      for (Element link : sampleLinks) {
         System.out.println("Text: " + link.text());
      }
   }
}

Outcome:

Href: www.google.com
Text: Google
Name: google
Id: imageDiv
Text: Sample

Answer 3

Answer №2

If you're working with Javascript, utilizing

document.getElementsByTagName('html')[0].innerHTML

will locate the initial occurrence of an <html> tag and fetch the HTML content within it. Given that the <html> element encapsulates our entire HTML document, this code snippet will retrieve the entire file.

For extracting the HTML content of a specific element identified by its ID as myEditor, consider implementing

document.getElementById('myEditor').innerHTML

. This function locates the first instance of the element matching the specified ID attribute and returns its innerHTML content accordingly.

Answer 4

If you're working with Javascript, utilizing

document.getElementsByTagName('html')[0].innerHTML

will locate the initial occurrence of an <html> tag and fetch the HTML content within it. Given that the <html> element encapsulates our entire HTML document, this code snippet will retrieve the entire file.

For extracting the HTML content of a specific element identified by its ID as myEditor, consider implementing

document.getElementById('myEditor').innerHTML

. This function locates the first instance of the element matching the specified ID attribute and returns its innerHTML content accordingly.

Discover the method for obtaining the data of a specific <div> element based on its ID through JavaScript in an Android WebView

Answer №1

Answer №2

Similar questions

Collecting data from bootstrap cards and saving into an array

Exploring the Brilliance of MVC PHP/AJAX

React Native issue: why are my variables resetting mysteriously?

unable to trigger Javascript using HTML form submission (listener malfunctioning)

Tips for keeping the Android Firefox browser from resizing the window when the soft keyboard is active

What causes the small black line to appear on the right side of an image when it is turned into a link?

iOS-exclusive Flexbox feature for cropping images in a column fashion

A miniature triangle-shaped bubble crafted with 1px of CSS3 styling

What methods can I use to integrate modifications to a library into my application?

the nextjs model is throwing a 400 bad request error when fetching data

Using an object method within a different object in JavaScript

JavaScript Age confirmation Overlay

Converting the beginning and ending dates of an event object in FullCalendar: A guide

Text centered vertically with jQuery is only loaded after the page is resized

Reposition the span element to the right of the div tag

Issue with knockout binding not functioning properly when using inline editing

Using ThreeJs to create interactive 3D objects with button-controlled movement

Testing an Android function using a handler in unit testing

What is the process for converting a URI to a bitmap?

How to use CSS to create two columns that adjust in height based on the content within