Can it be done with JavaScript?

[BoR|S]

Lets say I have a line of text, something like:
"Blah Blah Lalala Blah"
Is there a way to show it in this way:
"B l a h___B l a h___L a l a l a___B l a h" (One char space between laetters and three chars space between words) but without putting the   tag manually because the line of text will probobly be script generated and not static...

I think I know (+-) how to code it using PHP/ASP, but I'd like to know if there is a way to do it via JavaScript...

[aalbetski]

Using the string replace method and regular expression syntax, you can accomplish this. I did three passes:

1. replace all spaces with tildes (basically a placeholder character that I can look for later)

2. Add a space after every character

3. Replace the <space>~<space> patter with the three spaces.

You can pass whatever values you want to use as arguments if you wish. Modify as needed.

<script>
document.write(ModifyText("Blah Blah Lalala Blah"))
function ModifyText(sText)
{
var re = /(\s+)/g; //Create Regular Expression to look for all spaces
sString = sText.replace(re,"~") //Replace all spaces with a tilde

sText = sString
re = /(.)/g; //now we look for all characters
sString = sText.replace(re,"$1 ") //put a space after every one

sText = sString
re = /(\s+)~(\s+)/g; //find the pattern of (space~space)
sString = sText.replace(re,"&nbsp;&nbsp;&nbsp;") //replace it with three spaces
// Note that you will need to use &nb sp; three times, it doesn't show here though

return sString
}
</script>

[Zero Angel]

Why dont you just use CSS?

.example { letter-spacing: 6px; word-spacing: 18px }

for example.

[Xuor]

When I ran across this topic, I couldn't resist replying:

As I have stated before, I can't stand JS, but I love CSS, HTML, PHP, etc. As such, I look at this issue here as another area where CSS triumphs over JS. :D

I have no idea what the JS would be to accomplish what you want, Bor|s (if it even exists), but the CSS Zero Angel published would work great. For those who don't know how to make it work (I'm sure you do, Bor|s, I just want to help make things like this easy to do for those who are less advanced.), you would put the location on your page where the dynamic text would appear inside SPAN or DIV or P or whatever kind of tag you want. (BTW, does anyone know why SPAN works some of the time but not all of the time? It seems to work with CSS just fine--e.g. putting a style attribute in a SPAN-- but it doesn't work with things like HTML ALIGN attributes.)

Then in your tag (I will use SPAN for an example) do the following:


<SPAN style="letter-spacing: 6px; word-spacing: 18px;">

Variable or whatever you wish to put here.....

</SPAN>


Then, whatever is outputted to the page between the SPAN tags will be formatted by the CSS.

Yes, you could use class="example" instead of style=" ", but if you are only going to use this feature once in your pages, there is no real point in making an entire class for it, which would then probably be loaded into all of your pages.

[ByteWizard]

You should be able to parse the line of text in JS and insert a space if the next character is not a space (ie a char) and insert 2 spaces if the next char is a space (total of 3)