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);
});

how get a value inside ui:repeat for javascript [duplicate]

I would like to know how I can pass JSF managed bean properties to a JavaScript function.
Something like this:
<script>
function actualizaMenu(key){
#{linkedMenu.setKey(key)}
}
</script>
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>

This is not exactly "passing" of JSF variables. This is just printing JSF variables as if they are JavaScript variables/values. You know, JSF and JS do not run in sync at all. JSF runs in webserver and produces HTML/CSS/JS code which in turn runs in webbrowser once arrived over there.
Your concrete problem is most likely caused because you wrote JSF code in such way that it generates invalid JS syntax. An easy way to verify that is by just checking the JSF-generated HTML output which you can find by rightclick, View Source in browser, and by checking if you don't see any syntax error reports in the JS console in browser which you can find by pressing F12 in Chrome/IE9+/Firefox23+.
Imagine that #{entity.key} here
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
prints a Java string variable like "foo", then the generated HTML would look like
<a onclick="actualizaMenu(foo)">some name</a>
But hey, look, that represents a JavaScript variable named foo, not a JS string value! So if you actually want to ultimately end up as
<a onclick="actualizaMenu('foo')">some name</a>
then you should instruct JSF to generate exactly that HTML:
<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a>
Beware of special characters in the JSF variable though. You can use OmniFaces of:escapeJS() function for that.
Unrelated to the concrete problem, the concrete implementation of actualizaMenu() makes no sense. You seem to be attempting to set a bean property. You should not use JS for that, but a <h:commandLink> instead.
<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" />
Nest if necessary a <f:ajax> to make it asynchronous.

I would recommend using event binding with jQuery and the data attribute on elements to get the same result (assuming you use jQuery):
<script>
function actualizaMenu(key){
/* Logic here ... */
}
$(document).ready(function(){
$('.menuItem').click(function(){
var key = $(this).data('key');
actualizaMenu(key);
);
});
</script>
...
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>
And, as pointed out elsewhere, unless #{linkedMenu.setKey(key)} actually returns a piece of javascript (which seams unlikely and would probably be really bad even if it did) you need to fix the function as well.

I know this question is old, but to those who are still looking there's an alternative.
If you are using primefaces just try this out.
Request Context

Change data-content in a bootstrap popover

I'm really new to coding, I've searched a bit to try to find an answer and I feel like there's a very simple way to do this, but the answers I find I can't understand.
I have this example which shows the popover.
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>
I want to change the content of data-content in my JavaScript file
I tried this but it doesn't seem to work.
document.getElementById('test').setAtribute('data-content','hello');

As you are using jquery, try setting the value for content as shown below,
$('#test').data('content', 'hello');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>

Javascript can be a dangerous tool... it can and will silently do nothing if what you write is not valid Javascript.
So this line:
document.getElementById('test').setAtribute('data-content','hello');
has a misspelling in 'SetAttribute', which tries to call a function that doesn't actually exist (since it's misspelled), and so it does nothing at all.
First step when debugging: re-read your code carefully!

how to pass the value of <a> tag to a javascript function

First of all my question is, does a tag in html stores a value like input type = "text" does?
Secondly, I have a links like this let say:
<a href="#" >A</a>
<a href="#" >B</a>
<a href="#" >C</a>
I want to pass for each of the link their value let say A, B, C.
What i do is this:
A
<script type="text/javascript">
function sendVal(letter){
alert(letter);
}
</script>
But unfortunatelly i dont get A , but i get its href, how would i get the letter??
Any idea?

try this.
A
function sendVal(letter){
alert(letter);
}

A

here you go as JS only
A
function sendVal(letter){
alert(letter.text);
}
If you want cross browser compatibility i would really use jquery, otherwise you'll have to do lots of checks to see which to use.
If you are not limited to JS(as per client request) and this is a learning project you should really look at: jQuery

How to call js / script within href

I've been using this successfully in my template:
<span class="sharethis-text">
<p>More Options</p>
</span>
<script src="http://w.sharethis.com/button/buttons.js"></script>
<script>
stLight.options({
publisher:'******0b-6eed-4740-81e7-aa3ee0bd9f85',
});
</script>
But now I want to call this function in this:
<More-sharebar>More options</More-sharebar>
How is it possible to include the script properly?
Apologies if the answer is easy. I'm a complete beginner. I've been searching but I can't find how to do it.
Edit: Thanks for the answers so far, and I think now I have the function stLight.options( but I don't know how to include the external js file. Instead of editing the functions.php file, is it possible to simply include the script above in my HTML, but give it a name, and somehow call that name in the href?
The other thing: the function as it original works triggers on hover. I'd like to retain that, if possible.
Apologies for my ignorance.

Javascript supports following syntax :
<a href='javascript:alert('Hi')'>ClickMe</a>
This should solve your problem.
This is the reference Draft

In mark <a> define attrib:
onclick="javascript:functionName();"
or
onclick="return functionName(attribs)"
This should help.
But it should be done like this:
<a id="do_something">
aaa
</a>
<script type="text/javascrip">
$.(function(){
$('a#do_something').click(functionName());
});

If you have in your file.js the:
function helloWorld(){...}
You call in the href with a event this function:
More options

Just put this Javascript inside your href:
More options

in the HREF, you'll call the function you need, not the script file itself.
So you have to include your script in your HTML file (if possible at the end of the file, not in the header) and then call the method/function from your href.

Write a function that calls the function you want. According to your
post, maybe it's stLight.options? Return false if you don't want the navigating behavior of the a link.
function clickHandler() {
stLight.options({
publisher:'******0b-6eed-4740-81e7-aa3ee0bd9f85',
});
return false;
}
Add the onclick handler to the a link.
<More-sharebar>More options</More-sharebar>