How to take the content of a Javascript variable, which is an HTML tag?

Asked

Viewed 1,058 times

1

I have HTML tag content: 

<p id="horaInicial">2018-07-23 16:40:16</p>

within a Javascript variable, I want to know how to access the value: 2018-07-23 16:40:16 and put inside another variable!

Anyone can help?

javascript html5

  • Post the html snippet that has the tag for ease.

  • tried to use x = document.getElementById('id_da_tag').innerHTML; ?

  • you already tried var x=document.getElementById("horaInicial").innerText?

  • I didn’t see the tags go away, forgive me!

  • So.. I need to take directly from the variable, because it is the result of a for on the page.. that takes some publications (sets of Divs) and then takes the contents of those internal Ivs..

2 answers

5


Create an element that interprets as DOM and use textContent, so for example:

var foo = '<p id="horaInicial">2018-07-23 16:40:16</p>';
var tmpDiv = document.createElement('div');
tmpDiv.innerHTML = foo;

var bar = tmpDiv.querySelector("#horaInicial").textContent;

console.log(bar);

If by chance you use jQuery could just use the $() combined with .text():

of course importing jQuery just for this would be unnecessary consumption, so only do it if you already use jQuery for other things

var foo = '<p id="horaInicial">2018-07-23 16:40:16</p>';

var bar = $(foo).text();

console.log(bar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Security in the DOM against

Note that if you have images or other sources depending on the origin of the string that contains HTML your code may become insecure (it is not that it will be insecure, these are isolated/specific cases), see a post related to this:

So if you’re unsure about the source of the data in this string, it kind of can come from external sources to avoid attacks make use of DOMParser:

Supported browsers:

  • IE9+
  • Safari 3.2+
  • Chrome
  • Firefox

Example:

function createDOM(str) {
   return new DOMParser().parseFromString(str, "text/html");
}

var foo = '<p id="horaInicial">2018-07-23 16:40:16</p>';
var tmpElement = createDOM(foo);

var bar = tmpElement.querySelector("#horaInicial").textContent;

console.log(bar);

If it were jQuery it would have to match:

function createDOM(str) {
   return new DOMParser().parseFromString(str, "text/html");
}

var foo = '<p id="horaInicial">2018-07-23 16:40:16</p>';

var bar = $("#horaInicial", createDOM(foo)).text();

console.log(bar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  • Oops, I used the "textContent" and I was able to get the content.

  • @I edited the answer and left a detail on security

  • Great, thank you so much! ;)

  • @Guilhermenascimento I edited there

  • Hello dear @res , refers to your answer? Or something else?

1

You can use the function jquery .text(), that will return the content of the element you want.

Example:

        <html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    var conteudo = "<p id=\"horaInicial\">2018-07-23 16:40:16</p>";

    $(function () {
        var outra_variavel = $(conteudo).text();
        alert(outra_variavel);
    });
</script>
</head>

</html>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.