I am loading in a html document using the jsoup.parse(). I only want to modify the url references within the document and then write this out. Unfortunately, the textarea within the document is getting modified also. How can I write out the modified document with only my changes and no other changes? Currently writing out the doc.html().
<textarea class="code_input" id="textareaCode" wrap="logical" rows="10" cols="50">
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
</textarea>
<textarea class="code_input" id="textareaCode" wrap="logical" rows="10" cols="50"><!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
</html>
</textarea>
I think I understand what you mean. You want to unescape the html entities that are inside the <textarea> so that they are retained as proper tags.
Look into the Parser.unescapeEntities() function (see Jsoup docs).
Example using your sample html:
Document doc = Jsoup.parse(html);
String s = Parser.unescapeEntities(doc.html(), true);
System.out.println(s);
Will print out:
<textarea class="code_input" id="textareaCode" wrap="logical" rows="10" cols="50">
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
</textarea>
Let me know if this works for you.
Related
I have a code like this:
<!DOCTYPE html>
<html>
<head>
<script>
function replace(){
var text = document.getElementById("textarea").value;
var a = text.replace("a", "11");
var b = text.replace("b", "12");
var c = text.replace("c", "13");
document.getElementById("textarea").value = abc;
}
</script>
</head>
<body>
<textarea rows="4" cols="50" id="textarea"></textarea>
<button id="button" onclick="replace();">replace</button>
</body>
</html>
I'd like to replace letters with numbers, but I don't know how can I repair this script - only first "var" works or it doesn't work at all.
I think the problem is here:
document.getElementById("textarea").value = abc;
Thank you.
This is a correct way, you need to
<!DOCTYPE html>
<html>
<head>
<script>
function replace(){
var text = document.getElementById("textarea").value;
text = text.replace("a", "11");
text = text.replace("b", "12");
text = text.replace("c", "13");
document.getElementById("textarea").value = text;
}
</script>
</head>
<body>
<textarea rows="4" cols="50" id="textarea"></textarea>
<button id="button" onclick="replace();">replace</button>
</body>
</html>
replace does not change the text
"concatenation" abc didn't make too much sense, but you rather wanted to apply in a sequence 3 transformations
and here is (for a historical reasons :) ) an external playground for you: https://jsfiddle.net/mPrinC/ds9482zn/3/
I am looking to create a website that compiles the HTML code that you write it in a text editor.
Here is my code:
<!DOCTYPE html>
<html>
<head><title>HTML editor</title></head>
<body>
<textarea id="textarea">
</textarea>
<iframe id="frame" srcdoc="This is where the code is interpreted. ">
</iframe>
<button onclick="run();"></button>
<script>
function run() {
var x = document.getElementById("textarea").value;
var y = document.getElementById("frame");
y.srcdoc = x;
}
</script>
</body>
</html>
Write now, I have successfully created something that compiles html code. But I want to do the syntax highliting. How do I highlight the text?
Just add the required CSS and JS for Prism.js.
<!DOCTYPE html>
<html>
<head>
...
<link href="https://myCDN.com/prism#v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="https://myCDN.com/prism#v1.x/components/prism-core.min.js"></script>
<script src="https://myCDN.com/prism#v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>
Then add below HTML element
<pre><code class="language-css">p { color: red }</code></pre>
whatever code you write in this element will have syntax highlighting. class="language-css" determines the language for hightlighting, you can change as per your requirement. You can find all supported languages here.
Note: this is a basic example you can start from here and find more info at prism.js usage
I have this code:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
When I type a number, for example 05423110, I get on the adress bar is "https://api.pagar.me/1/zipcodes/?cep=05423110", but I would like to have "https://api.pagar.me/1/zipcodes/05423110".
What do I need to change on my code?
Thanks!
I would do it like this. The other answer will have the problem where it could potentially append something twice.
I also set it so the button disables for user friendliness (in case the server takes awhile to respond).
This solution does use jQuery, but chances are you will need to do other simple DOM manipulation and this will be very helpful.
Because you don't want the query string in there, but you must have it be GET, then its impossible not to have it append the query string to the URL (because that's what a GET request does).
Instead, I use javascript to simply redirect to the proper URL and ignore the form GET/POST entirely.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function() {
var form = $('form');
var baseUrl = form.attr('action');
$('form').submit(function(e) {
e.preventDefault();
form.find('[type="submit"]').prop('disabled', true);
window.location.href = baseUrl + form.find('[name="cep"]').val();
});
})();
</script>
Add method="post" to the form tag, then add an event listener to the form's submit event which append the input value to the action attribute value on the form:
const form = document.forms[0]
form.addEventListener('submit',()=>{form.action+=cep.value})
<form action="https://api.pagar.me/1/zipcodes/" method="post">
<input type="text" placeholder="cep" name="cep" id="cep">
<input type="submit">
</form>
Ofc StackOverflow snippets prevents POST.
I am trying to develop a simple back-end widget for asp. Since, I am new to ASP, I chose JavaScript as ASP language. I think I don't have the right tool to write to output. Response.Write() sends output directly to the start of the page. What I am missing here?
Hers is the code that I made:
<!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
<script language=Javascript runat=server>
Response.Write("Hello JS");
</script>
</body>
</html>
which is giving the following output:
Hello JS <!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
</body>
</html>
There is a great answer on the subject here but basically if you want this to work change the above code block as follows;
<!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
<% Call Response.Write("Hello JS"); %>
</body>
</html>
You can also replace the above line of code with <%= "Hello JS" %> as a shortened form of Response.Write() method.
if you want to use javascript then it should be like this:
<script language=Javascript>
alert("Hello JS");
</script>
or
<script language=Javascript>
alert('<%=SomeVarfromASP%>');
</script>
Those will give you POP up boxes with your message or in your case value of your variable in it.
Basically when you put "<%=" it is pretty much like you say please write this...
If you need something to be typed/printed on the page by JavaScript you will need to use more specialized functionality such as getelementbyid or similar.
Your code would look like:
<html>
<head>
<script type="text/javascript">
function ChangeGreet()
{
var vgreet = document.getElementById("JSGreet");
vgreet.innerHTML = 'Hello JS';
}
</script>
</head>
<body onload="ChangeGreet()">
<div>Hello MS</div>
<div id="JSGreet"> </div>
</body>
</html>
JavaScript and VBScript(Classic ASP) have their own syntax. Look it up at http://www.w3schools.com/js/DEFAULT.asp. It has great tutorials for beginners in both languages.
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>