Develop Reference

JavaScript string: get content of two standing next to each other pieces of content and wrap them together

I'm trying to create a small script that would wrap some parts of text from e.g. <p> tag like this one: <p>... 'displayed text'[popup content] ...</p> in a span wrapper.
The end result would look like this:
<span class='wrapper'>
displayed text
<span class='popup'>popup content</span>
</span>
At the moment I'm able to find and replace the text between apostrophes like this:
some_string.replace(/'(.*?)'/g,'<span>$1</span>');
But I would really like to wrap the popup content part first and then wrap it together with displayed text inside the wrapper element.
Would that be possible?

Sure - how about this?
some_string.replace(/'(.*?)'\[(.*?)\]/, "$1<span class='popup'>$2</span>");
Add a \s* between the two parts of the regex if they could be separated by whitespace:
/'(.*?)'\s*\[(.*?)\]/

How to append javascript code to textarea?

I am trying to append a textarea with some text containing a piece of javascript code. But it deletes all the tags automatically. How can I fix this problem?
Here is an example text from the database, and I stored it in blogObject['blog_content']:
<div data-configid="0/10000221" style="width: 525px; height: 292px;" class="issuuembed">
</div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
Some text here.
<a class="fancybox" href="http://ab5b871380c75ebbed44-0d6294cd72219e531b9ba85132078296.r10.cf2.rackcdn.com/userprofiles/2012/09/19/1/images/2014/11/04/org_1415121954_3b445d4fac6b78703bcf272307ac59f0.gif"><img src="http://ab5b871380c75ebbed44-0d6294cd72219e531b9ba85132078296.r10.cf2.rackcdn.com/userprofiles/2012/09/19/1/images/2014/11/04/org_1415121954_3b445d4fac6b78703bcf272307ac59f0.gif" width="190" /></a>
Some text here 2.
When I use $("#blog_content").html(blogObject['blog_content']) to add the above text, here is what I see:
Some text here.
Some text here 2.

as #Musa in the comment said, I should use .val() instead of .html(). It worked for me.

Chrome Extension: Reading text between a tag

I'm new to making Chrome extensions. I'm trying to read text between a class tag, such as:
<div id="AssetThumbnail" class="thumbnail-holder" data-3d-thumbs-enabled data-url="/thumbnail/asset?assetId=111795617&thumbnailFormatId=6912&width=320&height=320" style="width:320px; height:320px;">
<span class="thumbnail-span" **data-3d-url=**"/asset-thumbnail-3d/json?assetId=111795617" data-js-files='http://js.rbxcdn.com/a552a24cb2c7a47ad748fd129a2e9624.js.gzip' ><img class='' src='http://t7.rbxcdn.com/7cfa58047697662d12f33d68b71e5f42' /></span>
<span class="enable-three-dee btn-control btn-control-small"></span>
</div>
I'd like to get the text from data-3d-url=. I have surrounded it with asterisks in my code so you can see what I'm referring to.

Using jQuery you could retrieve an attribute like that with the following snippet.
alert($('.thumbnail-span').attr("data-3d-url"));
You can then change the alert function to set a variable or whatever else you want to use that value for.
Here's a JSFiddle example: http://jsfiddle.net/r1umr3s5/1/

How to keep line breaks in CKEditor WYSIWYG editor

I have an HTML code as follows
<div class="editable" ...>
<div class="code">
This is an example.
This is a new line
</div>
</div>
In CSS, code has "word-wrap: pre" attribute, such that the text in the inner DIV will show two lines. I use CKEditor with DIV replacement method to edit it. However, it becomes
<div class="code">
This is an example.This is a new line
</div>
The text inside the HTML tag will become one line long, beginning and trailing spaces and new line are stripped. So in CKEditor, although I have specified the config.contentsCss, it still shows one line because CKEditor has merge those two lines into one (I checked this in Chrome "Inspect Element" in CKEditor's iframe editor). Therefore, I see the source code or saved HTML, two lines format is not preserved because they are only one line.
I've googled and tried the CKEditor HTML writer or addRules to restrict the indent format and new line in begin/close tags, however, those seems work on HTML tags, not the document text. Is there any other methods to preserve line breaks of text?

I found it.
// preserve newlines in source
config.protectedSource.push( /\n/g );
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-protectedSource

$(document).on('paste', 'textarea', function (e) {
$(e.target).keyup(function (e) {
var inputText = $(e.target).val();
$(e.target).val(inputText.replace(/\n/g, '<br />'))
.unbind('keyup');
});
});

Use the <pre> HTML tag. Like this:
<div class="editable" ...>
<div class="code"><pre>
This is an example in a "pre".
This is a new line
</pre></div>
</div>
<div class="editable" ...>
<div class="code">
This is an example NOT in a "pre".
Therefore this is NOT a new line
</div>
</div>
Or you can put a <br/> tag in between your lines. Its the ssame as hitting enter.

In my particular case, it was an extra tag, univis, that I needed to give similar semantics (i.e., leave indentation and inebreaks alone), and what we ended up doing was:
CKEDITOR.dtd.$block.univis=1;
CKEDITOR.dtd.$cdata.univis=1;
CKEDITOR.dtd.univis=CKEDITOR.dtd.script;
But that looks like it might or might not be extensible to classes.

I got some Craft sites running and I don't want to paste the config file everywhere. For everyone else still having the problem: Just use redactor. Install and replace the field type. Correct everything once and you're done.

Regex in Javascript to remove links

I have a string in JavaScript and it includes an a tag with an href. I want to remove all links and the text. I know how to just remove the link and leave the inner text but I want to remove the link completely.
For example:
var s = "check this out <a href='http://www.google.com'>Click me</a>. cool, huh?";
I would like to use a regex so I'm left with:
s = "check this out. cool, huh?";

This will strip out everything between <a and /a>:
mystr = "check this out <a href='http://www.google.com'>Click me</a>. cool, huh?";
alert(mystr.replace(/<a\b[^>]*>(.*?)<\/a>/i,""));
It's not really foolproof, but maybe it'll do the trick for your purpose...

Just to clarify, in order to strip link tags and leave everything between them untouched, it is a two step process - remove the opening tag, then remove the closing tag.
txt.replace(/<a\b[^>]*>/i,"").replace(/<\/a>/i, "");
Working sample:
<script>
function stripLink(txt) {
return txt.replace(/<a\b[^>]*>/i,"").replace(/<\/a>/i, "");
}
</script>
<p id="strip">
<a href="#">
<em>Here's the text!</em>
</a>
</p>
<p>
<input value="Strip" type="button" onclick="alert(stripLink(document.getElementById('strip').innerHTML))">
</p>

Regexes are fundamentally bad at parsing HTML (see Can you provide some examples of why it is hard to parse XML and HTML with a regex? for why). What you need is an HTML parser. See Can you provide an example of parsing HTML with your favorite parser? for examples using a variety of parsers.

If you only want to remove <a> elements, the following should work well:
s.replace(/<a [^>]+>[^<]*<\/a>/, '');
This should work for the example you gave, but it won't work for nested tags, for example it wouldn't work with this HTML:
<em>Google</em>

Just commented about John Resig's HTML parser. Maybe it helps on your problem.

Examples above do not remove all occurrences. Here is my solution:
str.replace(/<a\b[^>]*>/gm, '').replace(/<\/a>/gm, '')