How to shorten javascript code?

Discussion in 'JavaScript' started by tobydawson13, Jul 8, 2010.

  1. #1
    Hi Dp members, does anybody know how I can shorten the code I have below? Maybe shorten it to only 1 function? I have know idea how to do this :S
    Thanks for helping :)

    <script>
    function bold()
    {
    var textarea = document.getElementById('detail');
    var tmp = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);
    textarea.value = textarea.value.substring(0, textarea.selectionStart) + '[b ]' + tmp + '[ /b]' + textarea.value.substring(textarea.selectionEnd);
    }
    function italic()
    {
    var textarea = document.getElementById('detail');
    var tmp = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);
    textarea.value = textarea.value.substring(0, textarea.selectionStart) + '[i ]' + tmp + '[ /i]' + textarea.value.substring(textarea.selectionEnd);
    }
    function underline()
    {
    var textarea = document.getElementById('detail');
    var tmp = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);
    textarea.value = textarea.value.substring(0, textarea.selectionStart) + '[u ]' + tmp + '[ /u]' + textarea.value.substring(textarea.selectionEnd);
    }
    function strike()
    {
    var textarea = document.getElementById('detail');
    var tmp = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);
    textarea.value = textarea.value.substring(0, textarea.selectionStart) + '[s ]' + tmp + '[ /s]' + textarea.value.substring(textarea.selectionEnd);
    }
    function code()
    {
    var textarea = document.getElementById('detail');
    var tmp = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);
    textarea.value = textarea.value.substring(0, textarea.selectionStart) + '[code ]' + tmp + '[ /code]' + textarea.value.substring(textarea.selectionEnd);
    }
    function quote()
    {
    var textarea = document.getElementById('detail');
    var tmp = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);
    textarea.value = textarea.value.substring(0, textarea.selectionStart) + '[quote ]' + tmp + '[ /quote]' + textarea.value.substring(textarea.selectionEnd);
    }
    </script>
    
    
    <a href="javascript:;" onclick="bold();">Bold</a>
    <a href="javascript:;" onclick="italic();">Italic</a>
    <a href="javascript:;" onclick="underline();">Underline</a>
    <a href="javascript:;" onclick="strike();">Strike</a>
    <a href="javascript:;" onclick="code();">Code</a>
    <a href="javascript:;" onclick="quote();">Quote</a>
    
    
    <form id="form1" name="form1" method="post" action="#">
    <textarea name="detail" cols="50" rows="5" id="detail"></textarea>
    <input name="p" type="hidden" value="2" /><br/><br/>
    <input type="submit" name="Submit" value="Reply" /><br/><br/>
    </form>
    Code (markup):
     
    tobydawson13, Jul 8, 2010 IP
  2. Kaimi

    Kaimi Peon

    Messages:
    60
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    
    <script>
    var actions = 
    {
    	bold: '[b ]',
    	italic: '[i ]',
    	underline: '[u ]',
    	strike: '[s ]',
    	code: '[code ]',
    	quote: '[quote ]',
    };
    
    function doit(action)
    {
    	if(actions[action])
    	{
    		var fin = actions[action].replace(/\[(\w+)\s/, '[ /$1');
    		var textarea = document.getElementById('detail');
    		var tmp = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);
    	textarea.value = textarea.value.substring(0, textarea.selectionStart) + actions[action] + tmp + fin + textarea.value.substring(textarea.selectionEnd);
    	}
    }
    
    </script>
    
    
    <a href="javascript:;" onclick="doit('bold');">Bold</a>
    <a href="javascript:;" onclick="doit('italic');">Italic</a>
    <a href="javascript:;" onclick="doit('underline');">Underline</a>
    <a href="javascript:;" onclick="doit('strike');">Strike</a>
    <a href="javascript:;" onclick="doit('code');">Code</a>
    <a href="javascript:;" onclick="doit('quote');">Quote</a>
    
    
    <form id="form1" name="form1" method="post" action="#">
    <textarea name="detail" cols="50" rows="5" id="detail"></textarea>
    <input name="p" type="hidden" value="2" /><br/><br/>
    <input type="submit" name="Submit" value="Reply" /><br/><br/>
    </form>
    
    Code (markup):
     
    Kaimi, Jul 8, 2010 IP
  3. tobydawson13

    tobydawson13 Active Member

    Messages:
    645
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Thanks again Kaimi :)
    How could I edit the code so that [b ][ /b] and all the others don't have the space?
     
    tobydawson13, Jul 8, 2010 IP
  4. tobydawson13

    tobydawson13 Active Member

    Messages:
    645
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #4
    Don't worry, I've done it now :)
    <script>
    var actions = 
    {
    	bold: '[b]',
    	italic: '[i]',
    	underline: '[u]',
    	strike: '[s]',
    	code: '[code]',
    	quote: '[quote]',
    };
    
    function doit(action)
    {
    	if(actions[action])
    	{
    		var fin = actions[action].replace(/\[(\w+)/, '[/$1');
    		var textarea = document.getElementById('detail');
    		var tmp = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);
    	textarea.value = textarea.value.substring(0, textarea.selectionStart) + actions[action] + tmp + fin + textarea.value.substring(textarea.selectionEnd);
    	}
    }
    
    </script>
    
    
    <a href="javascript:;" onclick="doit('bold');">Bold</a>
    <a href="javascript:;" onclick="doit('italic');">Italic</a>
    <a href="javascript:;" onclick="doit('underline');">Underline</a>
    <a href="javascript:;" onclick="doit('strike');">Strike</a>
    <a href="javascript:;" onclick="doit('code');">Code</a>
    <a href="javascript:;" onclick="doit('quote');">Quote</a>
    
    
    <form id="form1" name="form1" method="post" action="#">
    <textarea name="detail" cols="50" rows="5" id="detail"></textarea>
    <input name="p" type="hidden" value="2" /><br/><br/>
    <input type="submit" name="Submit" value="Reply" /><br/><br/>
    </form>
    HTML:
     
    tobydawson13, Jul 8, 2010 IP