We Keep Coding

putting Javascript variable in other variable's definition

I'm writing a small plugin for ckeditor,
On a button firing, I'm trying to make the editor grab the raw html data to send to the server.
The correct syntax for this is
CKEDITOR.instances.div_id.getData();
or alternatively
CKEDITOR.instances[div_id].getData();
However this is grabbing a set named id, I want it to be relative to its parent id
var id = $(this).parent().attr("id");
var htmlcontent = CKEDITOR.instances.id.getData();
I'm realizing I don't know how to plug a var in that without thinking it's a function falling under CKEDITOR. I should know this but it's just not coming to me.
Anecdotally that might not be a working parent id-grabber
EDIT: To solve the CKeditor issue (which is not easy to find on the net)
CKeditor has some built in API to grab the container element id.
This is a working id-grabber for a CKeditor plugin and the data-grab syntax helped constructed by the answers below:
var id = editor.container.getId();
var htmlcontent = CKEDITOR.instances[id].getData();
as of 12/4/2014

Why doesn't var htmlcontent = CKEDITOR.instances.id.getData(); work? The reason is that id is a variable holding the exact id stored previously in the line
var id = $(this).parent().attr("id");
This id variable holds something like "myElementId" in it. In order for you to use that string, you need to access the instances object using "bracket notation" (Related: Working with Objects MDN) if you do not specifically know the name of "myElementId" in advance.
As a result, this will work
var htmlcontent = CKEDITOR.instances[id].getData();
And would be similar to CKEDITOR.instances.myElementId.getData() if "myElementId" was the id of the parent element previously stored.

If you already have an editor object, you don't need to use CKEDITOR.instances at all, just use
editor.getData();

JS - Stripping tags while preserving line breaks works with DOM object, but not html in a variable

I'm trying to create a function in javascript (or jQuery) that will take a variable filled with html and output a plain text version. The function needs to strip the html tags and insert line breaks at the end of heading and paragraph tags.
I've been going round in circles for ages with this. There are lots of examples of how to take a DOM object, e.g. document.body.innerHTML and remove the tags. However, I'm using a variable filled with html and the results are not the same.
This is the supposed duplicate solution: http://jsfiddle.net/8JSZX/. However, create an html variable and use that and you get: http://jsfiddle.net/JjXXY/ - which does not preserve the line breaks.
The html variable would be something like:
var html = '<h1>This is a heading</h1><p>This is a paragraph</p><p>This is another paragraph</p>'
If there is a better solution to this I'm open to suggestions!

Gave it a shot:
var html_string = '<h1>Test</h1><p>A paragraph with a link</p>';
var regex = /<(\/?)[a-zA-Z0-9][^>]*>/g;
var stripped = html_string.replace(regex, '');
$("#result").html(stripped);
See: http://jsfiddle.net/Y6q2j/5/

Adding Javascript variables to HTML elements

So, I have some code that should do four things:
remove the ".mp4" extension from every title
change my video category
put the same description in all of the videos
put the same keywords in all of the videos
Note: All of this would be done on the YouTube upload page. I'm using Greasemonkey in Mozilla Firefox.
I wrote this, but my question is: how do I change the HTML title in the actual HTML page to the new title (which is a Javascript variable)?
This is my code:
function remove_mp4()
{
var title = document.getElementsByName("title").value;
var new_title = title.replace(title.match(".mp4"), "");
}
function add_description()
{
var description = document.getElementsByName("description").value;
var new_description = "Subscribe."
}
function add_keywords()
{
var keywords = document.getElementsByName("keywords").value;
var new_keywords = prompt("Enter keywords.", "");
}
function change_category()
{
var category = document.getElementsByName("category").value;
var new_category = "<option value="27">Education</option>"
}
remove_mp4();
add_description();
add_keywords();
change_category();
Note: If you see any mistakes in the JavaScript code, please let me know.
Note 2: If you wonder why I stored the current HTML values in variables, that's because I think I will have to use them in order to replace HTML values (I may be wrong).

A lot of things have been covered already, but still i would like to remind you that if you are looking for cross browser compatibility innerHTML won't be enough, as you may need innerText too or textContent to tackle some old versions of IE or even using some other way to modify the content of an element.
As a side note innerHTML is considered from a great majority of people as deprecated though some others still use it. (i'm not here to debate about is it good or not to use it but this is just a little remark for you to checkabout)
Regarding remarks, i would suggest minimizing the number of functions you create by creating some more generic versions for editing or adding purposes, eg you could do the following :
/*
* #param $affectedElements the collection of elements to be changed
* #param $attribute here means the attribute to be added to each of those elements
* #param $attributeValue the value of that attribute
*/
function add($affectedElements, $attribute, $attributeValue){
for(int i=0; i<$affectedElements.length; i++){
($affectedElements[i]).setAttribute($attribute, $attributeValue);
}
}
If you use a global function to do the work for you, not only your coce is gonna be easier to maintain but also you'll avoid fetching for elements in the DOM many many times, which will considerably make your script run faster. For example, in your previous code you fetch the DOM for a set of specific elements before you can add a value to them, in other words everytime your function is executed you'll have to go through the whole DOM to retrieve your elements, while if you just fetch your elements once then store in a var and just pass them to a function that's focusing on adding or changing only, you're clearly avoiding some repetitive tasks to be done.
Concerning the last function i think code is still incomplete, but i would suggest you use the built in methods for manipulating HTMLOption stuff, if i remember well, using plain JavaScript you'll find yourself typing this :
var category = document.getElem.... . options[put-index-here];
//JavaScript also lets you create <option> elements with the Option() constructor
Anyway, my point is that you would better use JavaScript's available methods to do the work instead of relying on innerHTML fpr anything you may need, i know innerHTML is the simplest and fastest way to get your work done, but if i can say it's like if you built a whole HTML page using and tags only instead of using various semantic tags that would help make everything clearer.
As a last point for future use, if you're interested by jQuery, this will give you a different way to manipulate your DOM through CSS selectors in a much more advanced way than plain JavaScript can do.
you can check out this link too :
replacement for innerHTML

I assume that your question is only about the title changing, and not about the rest; also, I assume you mean changing all elements in the document that have "title" as name attribute, and not the document title.
In that case, you could indeed use document.getElementsByName("title").
To handle the name="title" elements, you could do:
titleElems=document.getElementsByName("title");
for(i=0;i<titleElems.length;i++){
titleInner=titleElems[i].innerHTML;
titleElems[i].innerHTML=titleInner.replace(titleInner.match(".mp4"), "");
}
For the name="description" element, use this: (assuming there's only one name="description" element on the page, or you want the first one)
document.getElementsByName("description")[0].value="Subscribe.";
I wasn't really sure about the keywords (I haven't got a YouTube page in front of me right now), so this assumes it's a text field/area just like the description:
document.getElementsByName("keywords")[0].value=prompt("Please enter keywords:","");
Again, based on your question which just sets the .value of the category thingy:
document.getElementsByName("description")[0].value="<option value='27'>Education</option>";
At the last one, though, note that I changed the "27" into '27': you can't put double quotes inside a double-quoted string assuming they're handled just like any other character :)
Did this help a little more? :)

Sry, but your question is not quite clear. What exactly is your HTML title that you are referring to?
If it's an element that you wish to modify, use this :
element.setAttribute('title', 'new-title-here');
If you want to modify the window title (shown in the browser tab), you can do the following :
document.title = "the new title";

You've reading elements from .value property, so you should write back it too:
document.getElementsByName("title").value = new_title

If you are refering to changing text content in an element called title try using innerHTML
var title = document.getElementsByName("title").value;
document.getElementsByName("title").innerHTML = title.replace(title.match(".mp4"), "");
source: https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML

The <title> element is an invisible one, it is only displayed indirectly - in the window or tab title. This means that you want to change whatever is displayed in the window/tab title and not the HTML code itself. You can do this by changing the document.title property:
function remove_mp4()
{
document.title = document.title.replace(title.match(".mp4"), "");
}

Does something similar to gsub exist in javascript?

Is there any way to to do something similar to ruby gsub in javascript? I have a local html file that I want to process and replace certain template variables with content but I cannot figure out how to substitute out the template variables with the new content. The html contains fragments like below:
<div id="content">
<h1>{{title}}</h1>
{{content}}
</div>
Now if I wrap every template variables in a named div then I can use something like jquery's replaceAll method to replace the template variable with its content but I cant figure out how to do it without wrapping every variable in a div.
I just want to do something like $('document').gsub("{{title}}", "I am a title").
Anyone have any ideas?
Thanks for your help!

If others were looking for an equivalent to gsub in general, this only replaces the first match:
"aa".replace("a", "b") // "ba"
//g replaces all matches:
"aa".replace(/a/g, "b") // "bb"
"aa".replace(new RegExp("a", "g"), "b"); // "bb"

You can access the raw HTML via a DOM element's innerHTML property, or using JQuery's html property wrapping it, and then perform the substitution:
var html = $(document).html();
$(document).html(html.replace('{{title}}', 'I am a title');
EDIT:
As pointed out by Antti Haapala, replacing the entire document HTML can have side-effects you don't want to deal with, like scripts being reloaded. Thus, you should drill down to the most specific DOM element possible before performing the substitution, i.e.:
var element = $('#content');
var html = element.html();
element.html(html.replace('{{title}}', 'I am a title');

Well, you can use String.replace with a regex, but really, what you could use are jQuery Templates.
http://api.jquery.com/category/plugins/templates/

I recently used Handlebars to take a data attribute (template) from a table and inject another value (record id) from one of its rows:
// data-row-url="http://example.com/people/{{id}}"
var table = $(this).closest('.data_grid table');
if(table.attr('data-row-url')) {
var record_id = $(this).data('record-id')
var show_url_template = table.data('row-url');
var url_template = Handlebars.compile(show_url_template)
var url = url_template({ id: record_id });
$.getScript(url);
}
For context this code runs from inside an onclick event for the table's tr elements and fetches the clicked record via ajax.

I believe that might be a mustache template. You might want to check mustache.js. I think you might be able to compile that to JS.

How to edit what is inside a textarea using code in the url?

I'm not sure what the terminology is - but what I would like to do is this:
Using PHP, I would create a dynamic link for users to click that would indicate where they clicked it from. (I know how to do this)
I just don't know what the URL needs to look like to change the contents of a textarea on the target page.
So something like: http://website.com?document.getElementByName'your-message'.innerHTML='test'
Except clearly this doesn't work. Should I instead just put a variable in the URL (I don't know how to do that either) and have the javacript on the actual target page change the textarea content?
Basically I just need it to put one line of text in it. "I came from page x" I'm also willing to change the textarea to an input field if that makes things easier.

That's called a Query String website.com?variable1=value1&variable2=value2&...
Here's an example with just plain ole Javascript: http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx
Also see: How can I get query string values in JavaScript?

You can format your url like this:
www.example.com/?name=john%20blah&age=27&something=meh
then you can parse out the parameters with javascript
var parameterArray = location.search.slice(1).split("&");
var parameterObject = {};
for(i in parameters) {
parameterObject[parameters[i].split("=")[0]] = parameters[i].split("=")[1]
}
then you can populate the fields with the data
nameTxtBox.value = parameterObject.name;