How can I find some value in the html and store it in a variable?

Question

I have part of code:


    await fetch(request)
      .then((response) => {
        if (response.status === 200) {
          console.log("Success");
          result = response.text();
        } else {
          throw new Error("Something went wrong on API server!");
        }
      });
    console.log(await result);

I received response in the html format. Part of response:

[0-0]     <input class="form-control" data-val="true" data-val-number="The field Maximum days in advance an online reservation can be made must be a number." data-val-range="The field Maximum days in advance an online reservation can be made must be between 1 and 366." data-val-range-max="366" data-val-range-min="1" data-val-required="The Maximum days in advance an online reservation can be made field is required." id="MaxFutureReservationTimeDays" name="MaxFutureReservationTimeDays" onkeypress="return event.charCode === 13 || (event.charCode >= 48 &amp;&amp; event.charCode &lt;= 57)" type="number" value="20" />

How can I find some value in this text and store it in a variable? For example value="20" for MaxFutureReservationTimeDays. Thanks.

I tried use

string.includes(word);

Ar Rakin · Answer 1 · 2023-03-29T07:29:44.970

You can use DOMParser to do that.

const parser = new DOMParser(); // Create a DOMParser instance
const doc = parser.parseFromString(result, "text/html"); // result is the response text
const MaxFutureReservationTimeDays = doc.getElementById("MaxFutureReservationTimeDays").value; // get the value of the input element with ID "MaxFutureReservationTimeDays"

If the response has multiple input elements and you want to store the values from every input, you can loop over all input elements and store the data in an object.

const parser = new DOMParser(); // Create a DOMParser instance
const doc = parser.parseFromString(result, "text/html"); // result is the response text

const inputs = [...doc.getElementsByTagName("input")];
const data = {}; // key-value pair to store the data

for (const input of inputs) {
    data[input.getAttribute("id")] = input.value;
}

This may help: https://stackoverflow.com/questions/42649700/using-domparser-in-javascript-testing-with-mocha-and-jsdom — Ar Rakin, Mar 30 '23 at 09:36

score 0 · Answer 2 · answered Mar 28 '23 at 09:07

If you trust the HTML input, then a simple solution would be to put it inside an HTML element, so that the DOM gets updated, and then use the JS DOM manipulation functions to retrieve what you need, considering that you know how the HTML is structured and where the value is stored.

An example from the reference below:

function extractContent(s) {
  var span = document.createElement('span');
  span.innerHTML = s;
  return span.getElementsByTagName("input")[0].getAttribute("data-val-number");
};
alert(extractContent("<input class=\"form-control\" data-val=\"true\" data-val-number=\"The field Maximum days in advance an online reservation can be made must be a number.\" data-val-range=\"The field Maximum days in advance an online reservation can be made must be between 1 and 366.\" data-val-range-max=\"366\" data-val-range-min=\"1\" data-val-required=\"The Maximum days in advance an online reservation can be made field is required.\" id=\"MaxFutureReservationTimeDays\" name=\"MaxFutureReservationTimeDays\" onkeypress=\"return event.charCode === 13 || (event.charCode >= 48 &amp;&amp; event.charCode &lt;= 57)\" type=\"number\" value=\"20\" />"));

Ref: Extract the text out of HTML string using JavaScript

How can I find some value in the html and store it in a variable?

2 Answers2