Appending text to an element?

**shachi** · 03-10-2007, 11:43 AM

Hello all,

This sounds pretty easy but in fact it isn't. I am not simply talking about appending text to an element(using the appendChild). This is my situation:

I have the following text(already on the document):

Code:

This is some text.

Notice that the "t" is bold(and red), what I want now is to move the <b></b> tag to the left each time the user presses the left arrow key. So if the user
presses the left arrow key once, it would look like this:

Code:

This is some text.

So basically I want a "moving" tag.

I hope I was able to clear my point.

Thanks all!!

**jscheuer1** · 03-10-2007, 04:54 PM

I would think this belongs in the javascript section. That said, you could approach this with the DOM or with innerHTML. You would need to capture the onkeydown event. Once you have the relevant event captured in a way appropriate to your layout and intentions, you test the key, if it is the left arrow run a function. I worked this out document wide, using innerHTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#mb b {
color:red;
}
</style>
<script type="text/javascript">
function moveBold(el){
var t=el.innerHTML, c=t.indexOf('<')-1, new_t='';
if(c<0)
c=t.length-1;
t=t.replace(/<[bB]>|<\/[bB]>/g, '');
while(/[ \.,]/.test(t.charAt(c)))
c--;
for (var i_tem = 0; i_tem < t.length; i_tem++)
if([i_tem]==c)
new_t+='<b>'+t.charAt(c)+'<\/b>';
else
new_t+=t.charAt(i_tem);
el.innerHTML=new_t;
if(!/<[bB]>/.test(new_t))
moveBold(el);
}
document.onkeydown=function(e){
var e=e? e : window.event;
if(e.keyCode==37)
moveBold(document.getElementById('mb'));
}
</script>
</head>
<body>
<span id="mb">This is some tex<b>t</b>.</span>
</body>
</html>

That's just a rough idea, the code could be better protected and the event assignment could use the 'play nice' techniques of addEventListerner and attachEvent.

**shachi** · 03-10-2007, 05:10 PM

Awesome, this is perfectly what I wanted, but can you please comment out the codes?(sorry but I suck at js)

**jscheuer1** · 03-10-2007, 05:45 PM

Ok:

Code:

function moveBold(el){
//Declare variables, especially determine the postion of the 
//bold tag while defining c as the previous char #
var t=el.innerHTML, c=t.indexOf('<')-1, new_t='';
if(c<0) //if no bold tag, start from the end of the text
c=t.length-1;
t=t.replace(/<[bB]>|<\/[bB]>/g, ''); //remove existing bold tag
while(/[ \.,]/.test(t.charAt(c))) //skip spaces periods and commas by -
c--; // decrementing the character number for the char next in line
for (var i_tem = 0; i_tem < t.length; i_tem++) //loop the text one char at a time
if([i_tem]==c) //if the char is next in line -
new_t+='<b>'+t.charAt(c)+'<\/b>'; //enclose it in the new bold tag
else
new_t+=t.charAt(i_tem); //otherwise just use it 'as is'
el.innerHTML=new_t; //set the tag's innerHTML to the new string
if(!/<[bB]>/.test(new_t)) //if no bold tag -
moveBold(el); //do it again
}
document.onkeydown=function(e){ //assign document-wide event for keydown
var e=e? e : window.event; //determines the event object across browsers
if(e.keyCode==37) //check its key code, if it is the left arrow -
moveBold(document.getElementById('mb')); //run the function on the tag
}

Also, since you like it. Here is a version of it without any or (very little) global level exposure, one minor efficiency, and the 'play nice' feature I mentioned before:

Code:

<script type="text/javascript">
(function(){
function moveBold(el){
var t=el.innerHTML, c=t.indexOf('<')-1, new_t='';
t=t.replace(/<[bB]>|<\/[bB]>/g, '');
if(c<0)
c=t.length-1;
while(/[ \.,]/.test(t.charAt(c))){
c--;
if(c<0)
c=t.length-1;
}
for (var i_tem = 0; i_tem < t.length; i_tem++)
if([i_tem]==c)
new_t+='<b>'+t.charAt(c)+'<\/b>';
else
new_t+=t.charAt(i_tem);
el.innerHTML=new_t;
}
function grabKey(e){
var e=e? e : window.event;
if(e.keyCode==37)
moveBold(document.getElementById('mb'))
}
if ( typeof document.addEventListener != "undefined" )
    document.addEventListener( "keydown", grabKey, false );
else if ( typeof document.attachEvent != "undefined" )
    document.attachEvent( "onkeydown", grabKey );
else {
    if ( document.onkeydown != null ) {
        var oldOnkeydown = document.onkeydown;
        document.onkeydown = function ( e ) {
            oldOnkeydown( e );
            grabKey(e);
        };
    }
    else
        document.onkeydown = grabKey;
}
})();
</script>

**shachi** · 03-11-2007, 06:55 AM

jscheuer1: sorry if I am being too demanding but is there a way to move the tag, to the right too(I've been playing with this for ages and still can't figure it out)?

**jscheuer1** · 03-11-2007, 08:04 AM

The two functions, moveBold and moveBold2, could be combined or worked out to use a third function that contains the routines common to both but, it works fine this way:

Code:

<script type="text/javascript">
(function(){
function moveBold(el){
var t=el.innerHTML, c=t.indexOf('<')-1, new_t='';
t=t.replace(/<[bB]>|<\/[bB]>/g, '');
if(c<0)
c=t.length-1;
while(/[ \.,]/.test(t.charAt(c))){
c--;
if(c<0)
c=t.length-1;
}
for (var i_tem = 0; i_tem < t.length; i_tem++)
if([i_tem]==c)
new_t+='<b>'+t.charAt(c)+'<\/b>';
else
new_t+=t.charAt(i_tem);
el.innerHTML=new_t;
}
function moveBold2(el){
var t=el.innerHTML, c=t.indexOf('<')+1, new_t='';
t=t.replace(/<[bB]>|<\/[bB]>/g, '');
if(c>t.length-1)
c=0;
while(/[ \.,]/.test(t.charAt(c))){
c++;
if(c>t.length-1)
c=0;
}
for (var i_tem = 0; i_tem < t.length; i_tem++)
if([i_tem]==c)
new_t+='<b>'+t.charAt(c)+'<\/b>';
else
new_t+=t.charAt(i_tem);
el.innerHTML=new_t;
}
function grabKey(e){
var e=e? e : window.event;
if(e.keyCode==37)
moveBold(document.getElementById('mb'))
else if(e.keyCode==39)
moveBold2(document.getElementById('mb'))
}
if ( typeof document.addEventListener != "undefined" )
    document.addEventListener( "keydown", grabKey, false );
else if ( typeof document.attachEvent != "undefined" )
    document.attachEvent( "onkeydown", grabKey );
else {
    if ( document.onkeydown != null ) {
        var oldOnkeydown = document.onkeydown;
        document.onkeydown = function ( e ) {
            oldOnkeydown( e );
            grabKey(e);
        };
    }
    else
        document.onkeydown = grabKey;
}
})();
</script>

**jscheuer1** · 03-11-2007, 08:51 AM

Yeah, here it is with the two functions combined:

Code:

<script type="text/javascript">
(function(){
function moveBold(el,d){
var t=el.innerHTML, c=t.indexOf('<')+d, new_t='';
t=t.replace(/<[bB]>|<\/[bB]>/g, '');
c=c<0? t.length-1 : c>t.length-1? 0 : c;
while(/[ \.,]/.test(t.charAt(c))){
c+=d;
c=c<0? t.length-1 : c>t.length-1? 0 : c;
}
for (var i_tem = 0; i_tem < t.length; i_tem++)
if(i_tem==c)
new_t+='<b>'+t.charAt(c)+'<\/b>';
else
new_t+=t.charAt(i_tem);
el.innerHTML=new_t;
}
function grabKey(e){
var e=e? e : window.event;
if(e.keyCode==37||e.keyCode==39)
moveBold(document.getElementById('mb'),e.keyCode-38)
}
if ( typeof document.addEventListener != "undefined" )
    document.addEventListener( "keydown", grabKey, false );
else if ( typeof document.attachEvent != "undefined" )
    document.attachEvent( "onkeydown", grabKey );
else {
    if ( document.onkeydown != null ) {
        var oldOnkeydown = document.onkeydown;
        document.onkeydown = function ( e ) {
            oldOnkeydown( e );
            grabKey(e);
        };
    }
    else
        document.onkeydown = grabKey;
}
})();
</script>

**shachi** · 03-12-2007, 02:49 PM

Thanks, a billion!! I'll report you as soon as I get to test these. Thanks again.

**shachi** · 03-14-2007, 07:00 PM

Is there a way to actually stop the bold moving after it get to the first character and the last character? And is it possible to put the <b></b> tag just one character after the last visible character? I mean it needs to be right after the last character typed.

Code: