We Keep Coding

parse <script> tag with js/jQuery

I have a HTML page where a user is able to edit a HTML resource (using ACE Editor). Within this HTML source, there is a <script>-tag, which does some pretty basic stuff.
Is there any elegant solution to parse the script tag in order to (e.g.) evaluate the variables used within the script tag? For "normal" tags I use parseHTML() to have the html as a jQuery object.
From this example, I would like to retrieve the value of $myVal (which is "f00") and write it to #myLabel:
<textarea id="myScript" rows="5" readonly>
<script>
$myVal = "f00";
</script>
</textarea>
<label id="myLabel">Hello</label>
$(function(){
$scriptVar = $('#myScript').text;
// parse the $scriptVar
// retrieve the value of, $myVal, write it to #myLabel
//$myParsedValue = ???
//$('#myLabel').text('bar!');
});
And here is the fiddle: https://jsfiddle.net/stepdown/jqcut0sn/
Is this possible at all? I don't really care about vanilla js, jQuery, regex or maybe even an external library for that purpose.

Thanks to #JeremyThille, who pointed me to the right direction. I found out, what I want to achieve is possible through jQuerys $.globalEval() - see the official documentation.
Basically what globalEval() does: it runs the script which is written in the <textarea> and makes the variables / functions globally accessible.
IMPORTANT: this implies, that syntax errors (etc) by the user will break the evaluation, and sequential functionality could be flawed. Also, the new variables are GLOBAL, so basically a user could rewrite scripts on the hosting page. (In my case both problems are of minor importance, since this is an internal application for trained users - they also have syntax highlighting through the amazing ACE editor. But I wanted to make sure to point it out. Also, there are several articles regarding the risks/ouch-moments when using eval()...)
I updated the fiddle to achieve what I wanted: https://jsfiddle.net/stepdown/Lxz7q6uv/
HTML:
<textarea id="myScript" rows="5" readonly>
$myVal = "f00";
</textarea>
<hr />
<label id="myLabel">Hello</label>
Script:
$(function(){
var myScriptContent = $('#myScript').text();
$.globalEval(myScriptContent);
console.log($myVal);
$('#myLabel').text($myVal);
});

jQuery: Preserve user-inputted line breaks in <textarea>

I've been scouring Google and SO for hours but can't seem to find an answer to this for the life of me!
All I want to do is preserve the line breaks entered into a <textarea> element by the user, to post the content via a jQuery $.ajax() call. If I simply submit the form to a page as usual, this works, but I've been told by my boss to use REST/AJAX.
Many, many posts on SO and across the net in general mention replacing \n's with <br />'s, or using white-space: pre-wrap; in the element's CSS. These solutions do not work for me as the line breaks simply don't show up in Chrome Developer Tools.
Code snippet:
<form id="addPostForm" role="form" method="post" action="/blog">
<div class="form-group">
<textarea rows="5" id="postBody" name="postBody"></textarea>
...more input controls
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<script type="text/javascript">
$(document).on('submit', '#addPostForm', function() {
var postBody = $(this)[0].postBody.value;
...more code
});
</script>
When I enter e.g.:
"This is the first paragraph.
And here is another.
And yet another."
The postBody variable's value is:
"This is the first paragraph. And here is another. And yet another."
This is driving me crazy! Surely this shouldn't be as hard as it seems to be!
P.S. I don't think it should make a difference, but just in case anyone is wondering, I'm using Python/Pyramid, Jinja2 and Bootstrap 3 for this project.

Use this in JS
$("input[type=submit]").click(function(){
$.ajax({
type: "POST",
url: "yoururl",
data: $("#addPostForm").serialize()
(...)
});
});
In your server side code you can get POST value postBody with original spaces.

It would appear to me that this problem stems from the Chrome Dev Tools stripping the line breaks. Change the tool settings, or try something else like firebug.

Try splitting the lines by '\n' (yes I have tested this) and rejoin them with tags, check this out:
$('textarea').val().split('\n')
put this in your onclick function and set a breakpoint on it if you are using Chrome, it splits the lines into an array. if you join them with
.join('<br>')
you should be good to go.

Oops sorry for wasting your time, it was as simple as using $('#postBody').val() instead of $(this)[0].postBody.value. Thanks anyway to all commenters and answerers!

Script to pick up the HTML value of a page? Explanation inside

I am quite the noob at anything other than some HTML, CSS etc, basic website stuff. My javascript is pretty non-existant too. However we were quoted £2,500 by the people who develop our website to add Paypal on the checkout page! They use a fancy 3rd party program which is a standalone software made by themselves that contains all the products etc. We pay monthly to have access to that and make all website changes (such as price, product name etc) in that.
To cut a long story short, I had a look around and found this:
<script src="paypal-button.min.js?merchant=YOUR_MERCHANT_ID"
data-button="buynow"
data-name="My product"
data-amount="1.00"
async
></script>
Now, can I change the data-amount field to pick up what the "value" is on the page in the HTML? That way I can simply just add a button that picks that up. Which would work with paypal.
<div class='basketLabel'>Total Amount To Pay:</div>
<span>£</span>1,038.00</li>
<input type=hidden name='amount' value='1,038.00'>
Basically, how can I get the javascript code to pick up the value from the HTML (or somewhere else). I only have access to the full HTML of the page.

I am not sure how many of these data fields you have on a page but you could write a JS method to dynamically assign the values of the given HTML.
I would start by giving the HTML you're working with some ID's.
<script id="paypalScript" src="paypal-button.min.js?merchant=YOUR_MERCHANT_ID"
data-button="buynow"
data-name="My product"
data-amount="1.00"
async
onload="assignAmount"
></script>
<div class='basketLabel'>Total Amount To Pay:</div>
<span>£</span>1,038.00</li>
<input id="amount" type=hidden name='amount' value='1,038.00'>
Then write a method to execute onload.
function assignAmount(){
var amtElm = document.getElementById('amount');
var scriptElm = document.getElementById('paypalScript');
scriptElm.dataset.amount = amtElm.value;
}
Then attach the method to the onload event of the script element. Putting the script tag below your data field in the HTML should prevent any load issues you might run into.

search html div and display results on different page

I want to search multiple HTML files from a separate page, where I search for text from all the divs which has a specific id for each, whole id containing matched search term will be displayed on the search page in list.
The div list looks like this :
<body>
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
Please note that I want to perform search from different page and want to display results there with links to the searchable page.
For now I was searching like this :
HTML
<body>
<input type="text" id='search' />
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
JavaScript
$('#search').on('input', function () {
var text = $(this).val();
$('.vs div').show();
$('.vs div:not(:contains(' + text + '))').hide();
});
It is working on the fiddle here, but I don't want it to work like this, I want to do the search from a separate page remotely and display results there with link to this page.

Solution with jQuery and AJAX:
<form id="searchForm">
<input type="text" id="search"/>
<input type="submit" name="Search!" />
</form>
<div id="resultContainer">
</div>
<script type="text/javascript">
$("#searchForm").submit(function(e) {
e.preventDefault();
var results = $("#resultContainer");
var text = $("#search").val();
results.empty();
$.get("http://example.com/", function(data) {
results.append($(data).find("div:contains(" + text + ")"));
});
});
</script>
Fiddle (This fiddle enables you to search for content on the jsfiddle page, try for example JSFiddle as search term.)
Note however that this does not work cross-domain, because browsers will prevent cross-site scripting. You didn't describe your use-case clear enough for me to know whether you're okay with that.

You'll want to look at using PHP file_get_contents to retrieve the HTML contents of the external page, and from there analyze the data in the <div>s that you are interested in. Ultimately, you'll want to store each individual search term in a JavaScript array (you can create JavaScript arrays dynamically using PHP), and then create search functionality similar to example you posted to search all the elements in your array.
So on page load, you'll want to have a <div> in which you are going to list all the elements from the array. You can list these by looping through the array and displaying each individual element. From there, you will want to call a function every time the user enters or deletes a character in the <input> box. This function will update the <div> with an updated list of elements that match the string in the <input> box.
This is the theory behind what you are trying to accomplish. Hopefully it will give you some direction as to how to write your code.
Update:
If you're looking for a JavaScript only solution, check out a JavaScript equivalent of PHP's file_get_contents: http://phpjs.org/functions/file_get_contents/
From here, you can maybe look at using .split to break up the list. Ultimately, you're still trying to store each individual search term as an element in an array, it's just the method that you retrieve these terms is different (JavaScript as opposed to PHP).
Perhaps I was emphasizing too much on PHP, perhaps it's because it's the web development language I'm most familiar with. Hope this JavaScript-only solution is helpful.

Put JSON data into html form input hidden?

I'm building a rich web application that uses a lot of data. When I'm building it I found that I was repeating myself over and over.
This is the problem. I need to put hidden application logic into HTML elements to represent the data being viewed by the client.
This is a solution I found some time ago:
<a href="bla" data-itemId="1" .... more data.
There are two problems with this method.
I can't represent arrays.
It's just ugly.
I searched for a solution but did not find anything. I also went to facebook, opened firebug,
and found this:
{"actor":"19034719952","target_fbid":"454811929952","target_profile_id":"19034719952","type_id":"7","source":"1","assoc_obj_id":"","source_app_id":"","extra_story_params":[],"content_timestamp":"1324385453","check_hash":"9eabc3553e8a2fb6"}
This json was inside an input[type=hidden] element.
I tried to do the same thing with json_encode();
<input type="hidden" name="track" value="{"_id":{"$id":"4eee908f615c2102e9010000"},"link":"george-wassouf-flag-of-my-heart-longing","file":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","lyrics":null,"freezed":false,"hits":0,"images":{"large":"\/assets\/static\/default.track.large.jpg","thumb":"\/assets\/static\/default.track.thumb.jpg","icon":"\/assets\/static\/default.track.icon.jpg"},"duration":"300","created":{"sec":1324257423,"usec":78000},"albums":[{"_id":{"$id":"4eee8d63615c21f6e7000000"},"names":{"ar":"\u0643\u0644\u0627\u0645\u0643 \u064a\u0627 \u062d\u0628\u064a\u0628\u064a","en":"Kalamak ya Habibi"},"link":"george-wassouf-kalamak-ya-habibi","images":{"original":"\/m\/pics\/albums\/o.4eee8d612c3183.11879972.jpg","poster":"\/m\/pics\/albums\/p.4eee8d63967072.02645896.jpg","large":"\/m\/pics\/albums\/l.4eee8d63a89111.20372767.jpg","small":"\/m\/pics\/albums\/s.4eee8d63b18927.47242533.jpg","thumb":"\/m\/pics\/albums\/t.4eee8d63b7f1f4.11879932.jpg","icon":"\/m\/pics\/albums\/i.4eee8d63bf1304.59902753.jpg"}},{"_id":{"$id":"4eee8d63615c21f6e7000000"},"name":"Kalamak ya Habibi","link":"george-wassouf-kalamak-ya-habibi"}],"name":"Flag of my heart longing","title":"Flag of my heart longing","mp3":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","poster":"\/m\/pics\/artists\/p.4eee85cd7ed579.65275366.jpg","artists":[{"_id":{"$id":"4eee85cd615c21ece6000000"},"name":"George Wassouf","link":"george-wassouf"}]}" />
But when I try getting the value I get this {.
I have tried all constants like JSON_HEX_TAG and did not find any questions of this type.
How can I put JSON into HTML correctly and then get it with jquery/javascript?

Your string is correct, but it cannot be defined in HTML because it contains double quotes.
HTML requires you to escape double quotes when you are defining a String that is itself enclosed within double quotes. The appropriate way of doing this is using the HTML entity:
value="""
From PHP:
Use htmlspecialchars or htmlentities (http://www.php.net/manual/en/function.htmlspecialchars.php). In any case, you normally should be using this over EVERY value you write to the client browser (not doing so may result in security risks).
From Javascript:
If you need to do this from Javascript, you can programatically set the value of the hidden element (provided your JSON string is already contained in a Javascript variable). This way you don't have to worry about encoding the string literal:
hiddenElement.value = yourString;
In order to get an escape function you can use, maybe check this thread: Escaping HTML strings with jQuery .

Best way for me was to use html & quot;
for example i do this:
<input type="hidden" id="v" value="[{"id":"1"}]" >
instead of
<input type="hidden" id="v" value="[{"id":"1"}]" >

in your input tag, the value attribute in which you are trying to put json array. Look at it. you are putting ". Second " is ending the attribute value. thus it is being interpreted as value = "{". you need to escape those ". Use single quotes ' instead. And check then

It seems my answer is late, but I want to contribute to those who come later.
Before coming here you have the concept of HTML.Use single quotes ' , Should not do that, although it still works, it is against the HTML principle .
The best way is: Use htmlspecialchars or htmlentities. #jjmont said above.
I have a small example:
<input id="jsondata" value="<?php echo htmlspecialchars( json_encode($data), ENT_COMPAT ); ?>" >
||
<input id="jsondata" value="<?php echo htmlspecialchars( json_encode($data), ENT_NOQUOTES ); ?>" >

php
set array in
<input type="checkbox" name="deviceInfo" value="<?php print_r(json_encode(array_filter($array_data), JSON_FORCE_OBJECT));?>" />
?>