Develop Reference

jQuery custom markdown for a blockquote

I want to create my own markdown system for my platform.
So, to allow users to make their text bold, they can wrap text in double asterisks.
Here is how I do this:
<div class="content">
The following will be bold: **I am bold**
</div>
jQuery:
function markdown(markdownable) {
var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
markdownable = markdownable.replace( bold, '<span style="font-weight:bold">$1</span>' );
return markdownable;
}
$('.content').each(function() {
var markdownable = $(this).html(),
content = markdown(markdownable);
$(this).html(content);
});
Here is a working fiddle.
Now, to my question. Whenever users add a > at the beginning of a paragraph, like this:
> Hello world, this can be a very lengthy paragraph.
Then I want to wrap that text into <blockquote>.
How can I do this?

hey i have updated your jsfiddle..
code:-
function markdown(markdownable) {
var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
markdownable = markdownable.replace(bold, '<span style="font-weight:bold">$1</span>');
if (markdownable.indexOf(">") == 0) {
markdownable = markdownable.replace(">", "<blockquote>");
markdownable += "</blockquote>";
}
return markdownable;
}
$('.content').each(function() {
var markdownable = $(this).html(),
content = markdown(markdownable);
$(this).html(content);
});
working jsfiddle example:-
http://jsfiddle.net/dwxmjkb3/2/
new Code as per request:-
function markdown(markdownableOrg) {
var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
var dataArray = markdownableOrg.split("\n");
var data = [];
for (var i = 0; i < dataArray.length; i++) {
var markdownable = dataArray[i];
markdownable = markdownable.replace(bold, '<span style="font-weight:bold">$1</span>');
if (markdownable.indexOf(">") == 0) {
markdownable = markdownable.replace(">", "<blockquote>");
markdownable += "</blockquote>";
}
data.push(markdownable)
}
return data.join("\n");
}
now above given method splits the data(each line) and checks for > and replace it with blockquote.
updated jsfiddle :-http://jsfiddle.net/dwxmjkb3/6/
thanks

Regular expression to remove all the that is coming before and after <div> tag

I have seen references in this site. But I have this problem that is particular to my code.
I have some variable like
viewSourceText = "koushik ↵<div id="okokoko">some value </div> "
now i want to remove "&nbsp" appearing before and after the tag.So that output would be like this:
viewSourceText = "koushik<div id="okokoko">some value </div>"
now my code sample is:
viewSourceText.replace(/ \n<div/g, "<div>");
viewSourceText.replace(/</div> /g, "</div>");
But not working properly.

Here the proper way to do it in the DOM without regular expressions:
function removeNbspAroundDivs (start) {
var divs = start.getElementsByTagName("div");
for (var i = 0, len = divs.length; i < len; i++) {
var div = divs[i];
var element = div;
while ((element = element.previousSibling) && element.nodeType == 3) {
element.nodeValue = element.nodeValue.replace(/[\u00A0\n]+$/, "");
if (element.nodeValue.length > 0) break;
}
var element = div;
while ((element = element.nextSibling) && element.nodeType == 3) {
element.nodeValue = element.nodeValue.replace(/^[\u00A0\n]+/, "");
if (element.nodeValue.length > 0) break;
}
}
};
Fiddle

Replace a space within a SPAN tag with a BR tag

I need to replace the space between the 2 words with a BR tag. I've tried quite a few things, this one I thought would work, but the original script only does it to the first item. :( I need it to replace it on all the menu items.
It's for menu text on a CMS, so I won't know what the text is going to be. All I know is that it will always be no more than 2 words.
I can use either JS or jQuery.
Demo here: JS Bin Link
HTML:
<span class="navtext">Lorem ipsum</span>
<br>
<span class="navtext">Lorem ipsum</span>
<br>
<span class="navtext">Lorem ipsum</span>
JavaScript:
// Doesnt work
// var span = document.getElementsByTagName(".navtext");
// Only works for the first one
var span = document.querySelector(".navtext");
// Doesnt work
// var span = document.querySelectorAll("navtext");
function space() {
var elem = document.createElement("br");
// elem.className = "space";
// elem.textContent = " ";
return elem;
}
function replace(elem) {
for(var i = 0; i < elem.childNodes.length; i++) {
var node = elem.childNodes[i];
if(node.nodeType === 1) {
replace(node);
} else {
var current = node;
var pos;
while(~(pos = current.nodeValue.indexOf(" "))) {
var next = current.splitText(pos + 1);
current.nodeValue = current.nodeValue.slice(0, -1);
current.parentNode.insertBefore(space(), next);
current = next;
i += 2;
}
}
}
}
replace(span);

I think, you dont want to use jQuery. Well, Here is quick solution:
var elms = document.querySelectorAll(".navtext");
for(var i=0; i<elms.length; i++){
elms[i].innerHTML = elms[i].innerHTML.replace(/\s/gi, "<br />");
}
Here is the jsfiddle: http://jsfiddle.net/ashishanexpert/NrTtg/

using jQuery you can do this:
$("span.navtext").each(function(){
$(this).html($(this).text().replace(/ /g,"<br />"));
})

If you install jQuery you can make it all more simple. Follow the installation instructions and then the code you'll need is something like:
jQuery(function($) {
// for each navtext run the described function
$(".navtext").each(function() {
// "this" represents the navtext
// replace all " " with "<br/>" from this's html
var code = $(this).text();
code = code.replace(" ", "<br/>");
// update this's html with the replacement
$(this).html(code);
});
});

Someone on twitter provided me with a fix, which was exactly like what Ashish answered.
var spans = document.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].innerHTML = spans[i].innerHTML.replace(' ', '<br>');
}
But that would quite work for me, but it did give me my answer! So thanks to Pete Williams
This is the code I went with:
var spans = document.querySelectorAll('.navtext');
for(var i = 0; i < spans.length; i++) {
spans[i].innerHTML = spans[i].innerHTML.replace(' ', '<br>');
}

remove css class from specific part using javascript

I have a div whose id is divId and I have written a JS script through which I am highlighting the "this" keyword.Here is the JS code
var regex = new RegExp('this',"gi");
document.getElementById("divId").innerHTML=document.getElementById("divId").
innerHTML.replace(regex, function(matched)
{return '<span class=\'highlight\'>' + matched + '</span>';})
and here is the div
This is the text This is the text This is the text This is the text
This is the text This is the text This is the text This is the text
This is the text This is the text This is the text This is the text
Now I want to create a button on which I click and highlight class has been removed.I have tried this document.getElementById("divId").className = "" but it didn't work.As I am new to JS so now after my efforts now I am passing this problem to SO experts.How can I remove the class from all this word inside a divAny suggestions?

On newer browsers (IE8+ and such) you can do this:
var list = document.querySelectorAll("#divId span.highlight");
var index;
for (index = 0; index < list.length; ++index) {
list[index].className = "";
}
On older browsers, you could do this:
var list = document.getElementById("divId").getElementsByTagName("span");
var index;
for (index = 0; index < list.length; ++index) {
if (list[index].className === "highlight") {
list[index].className = "";
}
}
In both cases, I'm assuming "highlight" is the only class on these spans.

If you use or are willing to include jquery on your page, you can do this:
$('#divId span').removeClass('highlight');
Nice thing is that other classes are not removed.
There are similar functions in other js-frameworks, such as prototype.js

Try this:
var div = document.getElementById("divId");
var divs = div.getElementsByTagName('span')
for (var i=0; i<divs.length;i++){
divs[i].className = '';
}
Or
document.getElementById("theButton").onclick = function() {
var regex = new RegExp('<span class="highlight">this</span>','gi');
var div = document.getElementById("divId");
div.innerHTML = div.innerHTML.replace(regex,"this");

Why is my Javascript not valid?

I have a div with ID 'adpictureholder', to which I dynamically add (or remove) images.
On Form submit I want to get SRC values of all these images within that DIV and put them to the value of one hidden input with ID 'piclinkslisttosubmit'. The thing is that my current Javascript does not function as if there is some syntax typo there, but I don't see where. Can anyone please have a quick look at it?
function copyonsubmit(){
var strump1 = '';
var i=0;
var endi = document.getElementById('adpictureholder').childNodes[].length - 1;
var images = document.getElementById('adpictureholder').childNodes[];
for (i=0;i<=endi;i++)
{
strump1 = strump1 + '|' + images[i].src;
}
document.getElementById('piclinkslisttosubmit').value = strump1;
}

Change childNodes[] to simply childNodes.
You don't need to specify that a variable you're referencing is an array by adding brackets.

Your javascript isn't valid because you keep putting childNodes[] you can solve that by replacing childNodes[] with simply childNodes
function copyonsubmit(){
var strump1 = '';
var i=0;
var endi = document.getElementById('adpictureholder').childNodes.length - 1;
var images = document.getElementById('adpictureholder').childNodes;
for (i=0;i<=endi;i++)
{
strump1 = strump1 + '|' + images[i].src;
}
document.getElementById('piclinkslisttosubmit').value = strump1;
} ​

You shouldn't use [] when reading a property value:
var images = document.getElementById('adpictureholder').childNodes;
You can then get the length from the array, instead of reading the property again:
var endi = images.length - 1;

First off you don't need the [] after childNodes. that causes an error.
You also were forgetting that childNodes includes text nodes and would not work properly, because they did not all contain the src property. I've corrected that in the following example:
function copyonsubmit() {
var str = '';
var textbox = document.getElementById('piclinkslisttosubmit');
var i = 0;
var images = document.getElementById('adpictureholder').childNodes;
var numImages = images.length - 1;
var src = "";
for (i = 0; i < numImages; i++) {
if (images[i].tagName === "IMG") {
str += images[i].src + '|';
}
}
str = str.slice(0, -1); // cut off the final |
textbox.value = str;
}
http://jsfiddle.net/NWArL/2/
Secondly you could write this really simply with jQuery.
var str = "";
$("#apictureholder").children("img").each(function() {
str += $(this).attr("src") + "|";
})
$("#piclinkslisttosubmit").val(str);
Third off make sure to check your console for errors. It was very clear when I ran this code on JSFiddle that it had a problem.
Finally, what exactly are you trying to do?

Change childNodes[] to childNodes and rest looks fine to me,
Read about childNodes
Try,
function copyonsubmit(){
var strump1 = '';
var i=0;
var endi = document.getElementById('adpictureholder').childNodes.length - 1;
var images = document.getElementById('adpictureholder').childNodes;
for (i=0;i<=endi;i++)
{
strump1 = strump1 + '|' + images[i].src;
}
document.getElementById('piclinkslisttosubmit').value = strump1;
}

You said you were using jQuery, but you presented us with vanilla Javascript. I took the liberty of converting your code to jQuery and cleaning it up a bit. The others have already identified your problem, though.
function copyonsubmit() {
var strump1 = '';
var images = $("#adpictureholder")[0].childNodes;
for (var i = 0; i < images.length; i++) {
strump1 += '|' + images[i].src;
}
$('#piclinkslisttosubmit').val(strump1);
}​