You will need to convert the string into an HTML page and then target the “p” element and extract its text. Something like:
var p = "<p> info: 111,<br /> key: fdfd ,<br /> city: ,<br /> suburb: ,<br /> job: </p>"
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(p, 'text/html');
console.log(htmlDoc.body.getElementsByTagName("P")[0].innerText);
This is more of a warning for another common way.
A common alternative to DOMParser()
, mentioned by ATD, is to create an element, add it as innerHTML
and fetch it using textContent
.
let tParser = document.createElement('div');
tParser.innerHTML = "<p> info: 111,<br /> key: fdfd ,<br /> city: ,<br /> suburb: ,<br /> job: </p>";
console.log(tParser.textContent)
Yet be aware of the risks implied using innerHTML
. Everything gets interpreted as HTML and executed from your site. Which means, do not add it to the DOM or better, try to avoid it entirely.
Furthermore MDN mentions the following:
If your project is one that will undergo any form of security review,
using innerHTML most likely will result in your code being rejected.
For example, if you use innerHTML in a browser extension and submit
the extension to addons.mozilla.org, it will not pass the automated
review process.
Source
Your question is already answered:
function extractContent(s) {
var span = document.createElement('span');
span.innerHTML = s;
return span.textContent || span.innerText;
};
alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));
original question:
Extract the text out of HTML string using JavaScript
I am returning posts from WordPress api, currently getting an array with posts inside. I can get a string returned but it includes HTML tags. I have used textContent and innerText but don’t seem to be working.
I am currently returning <p> info: 111,<br /> key: fdfd ,<br /> city: ,<br /> suburb: ,<br /> job: </p>
What would be the best way top just return the content without the <p>
and <br>
?
Should flag it as duplicate instead. Also