We Keep Coding

Regular Expression, replace specific letter between html tags

I am having problems with regular expression replacement on html document. I need to find some specific letter in html text nodes and replace it with a different letter.
Lets say for example I want to replace letter "e" with letter "x".
My string may look like this:
<div class="some class" style="display:block">some text here</div>
so after replacement it must be:
<div class="some class" style="display:block">somx txxt hxrx</div>
As you can see, all html structure is still the same, only text between > and < has been affected.
Thank you for the help!

Since your question is tagged javascript, you can easily replace text content of your <div> without worrying about affecting tag attributes using String.prototype.replace() like this:
var el = document.getElementById('my_div');
var html = el.innerHTML;
html = html.replace(/e/g,'x');
el.innerHTML = html;
<div id="my_div">some text</div>

Ok, maybe some one will find my answer useful. I try (for example) to replace all German letters to normal english char in my HTML document. And this is my solution for my own question.
Need to download Sublime text editor. All files and manuals you can be find here Sublime text 2
It has nice and claver "find and replace" tools build in.
Than after long hours learn I find "regReplace" plugin is best for for this needs. It crates separate regExp rules and run it one by one over same
selection.
To download plugin you need to read some pages on plugin developer website RegReplace Sublime plugin
After you crate rules for each letter, you can use build in "find" tool to select all between tag using:
>.*?<
then you press "find all" and apply all regReplace rules to selected text.

use styling like span in textarea

I am trying to have a textarea that can have some simple styling like spans in a paragraph. But the problem is that no html tags are allowed in textarea. So what should I do to have a textarea that can have some simple styling like coloring a sentence?

Use some RichText editor controls. There are many free ones available.
http://ckeditor.com/
http://www.tinymce.com/
More items in this links
1) http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
2) http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

Preserving white space in an HTML select option

I have a set of html text boxes that take input and when the user clicks an 'add' button uses javascript to take the text input and format a string that is put in an HTML select box. The first of these boxes is supposed to contain a 2 character number but can also accept a blank. The formatted strings would look like this:
01-ABC-O
02-DEF-I
However I need a way to display the blank numbers that lines up with the other elements
-GHI-O
This type of entry will show up fine when the javascript adds the option, but when the page is reloaded and the select is repopulated with the values (I'm using Java, jsp, and struts 1.1 if that helps) it gets the same values(spaces preserved) but the whitespace is no longer shown in the select control (I've looked at the page source, and it looks identical to when the javascript adds the option). I have tried substituting the spaces for but this just prints the string "&nbsp" instead of the space. I've also tried using "pre" html blocks and the css white-space property and neither have worked.
Let me know if any further clarification is needed.

You need to replace the spaces with and it should work - note the closing semi-colon (which is missing from your example in the question)! When you do it through Javascript, most (all?) browsers will automatically render the spaces, but when the spaces are there when the page is loaded all (sometimes all but one) of them will be ignored.
You should also apply a font-family: CSS attribute to the select that specifies mono-spaced font(s) in order to ensure everything lines up properly.

When creating the select option with javascript, to preserve white-space, use "\xa0" - it is a NO-BREAK SPACE char.

You can use the pre css style on the area that you are outputting the value to.
<style type="text/css">
#element {
white-space: pre;
}
</style>
<div id="element">
stuff goes here
</div>
This will preserve all whitespace in the div element (other element types will also work) and then you don't need to worry about using the non breaking space.

Are you going to add it via scripting, you need to use Escape Codes for Space "% A0" which you then decode with unescape ()
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");

logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
Since unescape is deprecated, you may want to use decodeURI:
logTypeList[i] = new Option(decodeURI(" kent Agent".replace(/ /g, "%C2%A0")), "theValue");
More info at http://www.javascripter.net/faq/mathsymbols.htm

You can use the Unicode Character 'SPACE' (U+0020) instead of ("\u0020")

Styling letters of a word within an input differently, possible?

Wondering if this is even possible, but if I have a input containing text, for example lets say the word 'Test' is in the input. What I would like to be able to do is change the styling on the individual letters of the word 'Test'
I would like the 'Te' to be bold and then have the 'st' be regular.
It wouldn't have to be bold, maybe I would like the 'e' to be red or something like that.
Any ideas on how this might be accomplished?

Don't think it is possible (will do some more test).
What about adding a contenteditable div which looks like a input?
Simple contenteditable exmaple: http://jsfiddle.net/PpEx7/
EDIT
Nopez not possible. :)

You should take a look at how HTML WYSIWYG editors are build.
Basically, they
hide the input field and display another html element with the styled content:
Highlight text as you type on textarea
or
use design mode in html:
javascript Rich Text Editors
both ways are not trivial...

If you take a look at the MDN CSS Reference you can see for yourself that there is no selector for single letters inside a field.
The best you can do is use :first-letter
But As you can see it does not work on <input />

No it's not possible with an <input type="text"> tag. You can however trick the user into believing he is using a styled input by replacing it with a contendeditable div or something.
However, I looked into this couple of years ago, and it's a mess if you want a reliable cross browser solution for this.
Unless I remembered wrong the html from just showing a bold text in a contenteditable div could easily result in the following across the major browsers:
<BOLD style="font-weight:bold">Bold</BOLD> <!-- IE -->
<span style="font-weight:bold">Bold</span> <!-- Chrome -->
<b>Bold</b> <!-- Firefox -->
<strong>Bold</strong> <!-- Safari -->
<lol style="fOnt-WEIGHT: bold;">Bold</lol> <!-- IE6 -->
No kiddin.

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.