Selecting specific part of an HTML text - javascript

I have a function that returns some HTML fragment that I store in a variable called data, with its whole structure. What I want is to extract from it some of those parts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script id="hello">
</script>
</head>
<body>
</body>
</html>
For example, I want to get the body and save it in a new variable:
var body = data.split("<body")[1].split(">").slice(1).join(">").split("</body>")[0];
Where data is the HTML text as a string that the original function is returning.
Is there any way I could save an specific script, from its ID (in this case with id = hello), and save it in another variable??
Thank you very much

var newVar = $("#hello").html();

Let's suppose you have an HTML string in a variable, for example
var foo = '<body><span>bar</span></body>';
Now, let's initialize a parser, to convert this into HTML:
var parser = new DOMParser();
var doc = parser.parseFromString(foo, "text/html");
Now, you can read anything from foo, as it is converted into HTML:
document.getElementsByTagName("body")[0].innerHTML = doc.querySelectorAll("body")[0].innerHTML;

$html = document.querySelector("body").innerHTML;
$hello = document.getElementById("hello").innerHTML;
console.log($html);
console.log($hello);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script id="hello">
// script data
</script>
</head>
<body>
</body>
</html>

Related

How to get Value from html string?

I have a html string like this which response from API:
const response = `
<html>
<head>
<title></title>
</head>
<body>
<code>Value I want to get<br></code>
</body>
</html>
`;
So the content maybe dynamic but the tag <code> is unique. I want to have some more solutions on this to see what is the best solution.
You could use a DOMParser to convert your HTML string into a Document object which you can then use querySelector() to get your desired value:
const response = `
<html>
<head>
<title></title>
</head>
<body>
<code>Value I want to get<br></code>
</body>
</html>
`;
const {body} = new DOMParser().parseFromString(response, 'text/html');
const value = body.querySelector('code').innerText; // find <code> tag and get text
console.log(value);

How to remove the base Lablel use javascript in html?

My website is reverse proxy google (I am in china ,cannot access google ),
like this url :
"https://accounts.google.com/SignUp?hl=zh_CN&continue=https://myaccount.google.com/intro"
I want to remove the base Lablel use javascript?,But my method doesn't work,Maybe I did something wrong, I don't know why.Thank you very much for any help.
my js method :
document.body.innerHTML = document.body.innerHTML.replace('<base href.*?>','')
Original code like this :
<!doctype html>
<html lang="zh-CN" dir="ltr">
<head>
<base href="https://accounts.google.com/">
I expect output :
<!doctype html>
<html lang="zh-CN" dir="ltr">
<head>
If your intent is to clear contents of head tag, this should do:
document.getElementsByTagName('head')[0].innerHTML = ''
If it's just base tag then:
const headTag = document.getElementsByTagName('head')[0];
const baseTag = headTag.getElementsByTagName('base')[0];
headTag.removeChild(baseTag);
Just take the element with querySelector and remove it.
var elem = document.querySelector('base');
elem.parentNode.removeChild(elem);
<!doctype html>
<html lang="zh-CN" dir="ltr">
<head>
<base href="https://accounts.google.com/"/>
</head>
</html>
I hope this helps.
var elem = document.getElementsByTagName('base');
elem[0].href = '';

Web-browser is not showing the output

I'm new to JavaScript and already encountered a problem. When I run the code and the browser pops up, it[browser] does not show anything. What I have is the testMethod.js file with one method:
function testMethod(num1, num2){
var value = num1 + num2;
return value;
}
and an HTML file from where I'm trying to run:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> My JavaScript</title>
<script language = "javascript" src = testMethod.js"></script>
</head>
<body>
<script language = "javascript" type = "text/javascript">
// var getValue = testMethod(2,3);
document.write("The result is " + testMethod(5,3));
</script>
<noscript>
<h3> This site requires JavaScript</h3>
</noscript>
</body>
</html>
The code is not implementing the result at all. It shows only a blank page browser.
It seems you have a quote missing in the html, it should say src="testMethod.js" where you are including the script in the first place.

simple javascript code does not work: var count = colors.push(“red”, “green”);

<html>
<head></head>
<body>
<script>
var colors = new Array();
var count = colors.push(“red”, “green”);
alert(count);
</script>
</body>
</html>
I tried this on firefox and IE, do you think that my version of JavaScript needs to be updated?
You need to use real quotes, either " or ', for example:
var count = colors.push('red', 'green');
The quote character you have used is illegal and is showing the JavaScript error SyntaxError: Unexpected token ILLEGAL.
Demo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script type='text/javascript'>
var colors = new Array();
var count = colors.push('red', 'green');
// alert(count);
alert(colors[0]);
</script>
</head>
<body>
</body>
</html>
I just copy pasted your code in jsFiddle and it looks like your quotes are illegal characters (copy pasted from word / web?). Try typing them out again and it should work.

Load and parse xml based on string, IE

Im trying to parse an xml string in IE based on the following example: http://dean.edwards.name/weblog/2006/04/easy-xml/
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
var xml = document.createElement("xml");
xml.src = '<test><node1>Test</node1></test>';
document.body.appendChild(xml);
var xmlDocument = xml.XMLDocument;
document.body.removeChild(xml);
});
</script>
</head>
<body>
</body>
</html>
Fiddle
However, its not working. I get no errors, but nothing is happening.
Is there any way to generate an XML file on the client side in IE based on a valid xml string? Is activeX the only option?
Thanks in advance
A variant I have working is not to create an xml object, but create a wrapper div instead:
<script type="text/javascript">
$(function(){
var div, xmlDocument;
div = document.createElement('div');
div.innerHTML = '<xml><test><node1>Test</node1></test></xml>';
document.body.appendChild(div);
xmlDocument = div.firstChild.XMLDocument;
document.body.removeChild(div);
});
</script>
ActiveX is certainly one option. The code would be something like:
var xml = '<test><node1>Test</node1></test>';
var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(xml);
alert(xmlDoc.documentElement.nodeName);

Categories

Resources