We Keep Coding

Remove extra br tags with JS

I have a post which contains extra line breaks and want to limit the post to only show one linebreak. I thought this css might work..
br+br{display:none}
but since the text is not wrapped in its own element all the line breaks in the post are siblings and this doesn't work... now I am trying to solve this with JS...
content.replace(/<br><br>/g,'<br>')
Why is this only replacing the first set of linebreaks that are next to each other? (I need to run it multiple times to get the effect I want of all uneccesary line breaks being removed)
and what should I do instead?

If your regex represents your HTML exactly, this should work:
content.replace(/(<br>)+/g,'<br>')
Although your CSS should've worked: http://jsfiddle.net/UvVbE/

Javascript insert text into div

This is a followup question to Removing <span> tag while leaving content intact, with just javascript
If I use spans to highlight text in a page, it breaks up the content into new nodes. And then, when I remove the highlight spans using replaceChild, the nodes remain separated. I would like to have the original text merged back into a single text node, instead of three text nodes - the text before the highlighting started, the text that was previously highlighted, and the text after the highlighting ended. Is this possible to do?

You could try something like
containerElement.innerHTML = containerElement.textContent;
Not sure that will work on IE prior to 9 though because of textContent.

Similar to Jim's suggestion but accommodates IE:
containerElement.innerHTML = containerElement.textContent || containerElement.innerText;
Or a much longer version:
var text = containerElement.textContent || containerElement.innerText;
while (containerElement.firstChild) {
containerElement.removeChild(containerElement.firstChild);
}
containerElement.appendChild(document.createTextNode(text));
I think the first is simpler.

How to do same as backspace when using execCommand() with editable iframe?

I am using execCommand with javascript to insert text into editable iframes like this:
element.execCommand("insertHTML",false,"some text");
Anyone know how to insert that text instead of the first character to the left of the cursor? So the same effect as pressing a backspace before doing the above?

It seems that there's no easy way to send keystrokes to editable iframe, so you'll probably need to find some sort of workaround. Easiest way to do that would be to get the contents from iframe, manipulate them and then put them back to iframe.
E.g.:
Select all text in iframe with
var selection = element.execCommand("selectAll");
to remove last character - slice selection
selection = selection.baseNode.data.slice(0, -1)
delete all content
element.execCommand("Delete")
append sliced selection + your new text
element.execCommand("insertHTML",false,selection);
element.execCommand("insertHTML",false,"some text");
References:
http://msdn.microsoft.com/en-us/library/ie/ms533049(v=vs.85).aspx
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
P.S. I'm note very familiar with editable iframe or selection objects, so if you have any html of special characters in your text it might be much more complicated than this. Also you might need to tweak it for different browsers.

Allow Tabbing in a contentEditable div with execCommand

I am making an application where I need for a contentEditable div to be allowed to have tabs in it. I have already figured out that it is really not possible to have to work correctly. So is there a way that on keyDown it adds the HTML code for a tab, which is
What I have so far is this
document.getElementById('codeline').contentEditable='true';
document.getElementById('codeline').onkeydown=function(e){
if(e.keyCode==9){
e.preventDefault();
//document.getElementById('codeline').contentWindow.document.execCommand("InsertHTML",false," ");
//Thought this would work but it doesn't
}
}
If anybody knows if there is a way to do this, or if that is the way and I am simply doing it wrong, please tell me! Thanks!

The HTML spec specifies that a TAB char should be treated as a single white space except for when it's contained inside a <pre> element.
The code that you posted above does work and it does insert a TAB char but it's just displayed by the browser as a white space. If you can put your entire editable content in a <pre> tag then your tabs will show up.
If you only want to use the tabs to indent content, you can also look into
execCommand('indent', false, null)

For future readers, perhaps a simpler solution is to just use the 'pre' white-space style. original post here.
white-space: pre;

"indent" command, firefox wraps the selected text with blockquote element.
So one can define a margin-left or padding-left property for blockquote element to represent tabbing.
The "outdent" command will remove the blockquote element and hence the styles.

Wrap highlighted text within textarea with strong tags using javascript/jquery

I am looking to create a javascript/jquery function to wrap a piece of highlighted text from a textarea in strong tags - similar to the WYSIWYG editor here.
Is this possible and if so can you point me in the right direction.
EDIT:
OK so here's a hopefully clearer description of what I want...
I have a textbox on my page which I can type in.
I then want to be able to highlight a part of this text and wrap the highlighted part in <strong> tags
So if the text box had the words one two three and I highlighted the word "two", I want to be able to wrap that word in the strong tags - so becoming one <strong>two</strong> three
Hope this is clearer... I know there are plugins out there but I don't need the full WYSIWYG functionality.

My Rangy inputs (terrible name, I know) jQuery plug-in does this.
Example code:
$("#foo").surroundSelectedText("<strong>", "</strong>");
jsFiddle: http://jsfiddle.net/aGJDa/

I love Rangy! Use it often! But I didn't want to include the whole thing just for this little application, so I did it using document.execCommand to wrap the selected text, then used the href (third parameter of the CreateLink execCommand) to find the element, wrap it with what I wanted, and then remove the link:
document.execCommand('CreateLink', false, 'uniqueid');
var sel = $('a[href="uniqueid"]');
sel.wrap('<strong />')
sel.contents().unwrap();
document.execCommand is supported by all major browsers so you should be safe hacking it this way. In the browsers I've tested, the browser itself will close and open tags for you, so if you're selecting from the middle of one html tag to the middle of another, it should nest the tags correctly.