Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Special Character Replace with Jquery

    Hi all,

    I want to be able to replace all special characters like: ',",..., with their HTML entities.

    I have no option to PHP which I have found online multiple options.

    Here is an example as to what I'm dealing with.

    <form id='myform'>

    <input>There's so many options out there</input>

    to....

    <input> There&lsquo;s so many options out there</input>

    </form>

    Any help would be awesome thank you!

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,990
    Thanks
    15
    Thanked 233 Times in 233 Posts
    I just went through all this, took about three hours to get everything working satisfactorily. I wanted people to add comments to a photo album, and I wanted them to be able to include some HTML.
    Code:
    $newarg1 = str_replace('"','&#38;#34;',$arg1);
    That's what I ended up with, just escaping the double quotes because that's what I was using to contain the text. If it escaped the single quotes people would not have been able to enter any HTML attributes.

    The way this setup worked was they went to an editor page, chose a thumbnail by clicking on it, typed into a heading and message field and then clicked a form button to enter the data. when you opened up the editor the next time you would see all the text that you had entered and could edit it. I used the post method. I was very pleased with the result. A lot depends on how you are using and storing the data. In this case it was simply stored as a php file in the user's album. It was retrieved by printing the variables.
    Last edited by DrDOS; 09-21-2010 at 01:45 AM.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Sounds like the OP wants a javascript equivalent to the php function htmlentities. You could try this link.

  • #4
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Very newb question but how do I incorporate this to check my input fields in my form? Thank for your answer guys, trust me I have been looking for a while.
    Last edited by pcproff; 09-22-2010 at 06:27 PM.

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Sounds like the OP wants a javascript equivalent to the php function htmlentities. You could try this link.
    Very newb question but how do I incorporate this to check my input fields in my form? Thank for your answer guys, trust me I have been looking for a while.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Use the javascript functions given on the link (looks like you need htmlentities and get_html_translation_table) which then allow you to call a htmlentities function in javascript which you can use to output transformed text from your input box.

  • #7
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts
    This is what I got and no success.

    <html>
    <head>
    <script src="php.default.min.js"></script>
    <script type="text/javascript">
    function htmlentities (string, quote_style) {
    var hash_map = {}, symbol = '', tmp_str = '', entity = '';
    tmp_str = string.toString();

    if (false === (hash_map = this.get_html_translation_table('HTML_ENTITIES', quote_style))) {
    return false;
    }
    hash_map["'"] = ''';
    for (symbol in hash_map) {
    entity = hash_map[symbol];
    tmp_str = tmp_str.split(symbol).join(entity);
    }

    return tmp_str;
    }</script>
    </head>
    <body>
    <h1>frequency decoder</h1>
    <h2>Unicode &amp; HTML entity conversion service</h2>

    <form action="" method="">
    <fieldset>
    <label for="hphrase">Enter phrase:</label>
    <input type="text" name="hphrase" value="" tabindex="4" />
    </fieldset>
    <input type="button" value="Convert" tabindex="5" onClick="htmlentities();" />
    </form>
    </body>
    </html>

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <form action="" method="">
    <fieldset>
    <label for="hphrase">Enter phrase:</label>
    <input type="text" name="hphrase" id="hphrase" value="" tabindex="4" />
    </fieldset>
    <input type="button" value="Convert" tabindex="5" id="runit" />
    </form>
    Code:
    $(document).ready(function(){
    	$('#runit').click(function(){
    		alert(htmlentities($('#hphrase').val()));
    	});
    });
    and making sure you are loding the scripts from both:

    http://phpjs.org/functions/htmlentities:425

    and

    http://phpjs.org/functions/get_html_...tion_table:416
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #9
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV View Post
    Code:
    <form action="" method="">
    <fieldset>
    <label for="hphrase">Enter phrase:</label>
    <input type="text" name="hphrase" id="hphrase" value="" tabindex="4" />
    </fieldset>
    <input type="button" value="Convert" tabindex="5" id="runit" />
    </form>
    Code:
    $(document).ready(function(){
    	$('#runit').click(function(){
    		alert(htmlentities($('#hphrase').val()));
    	});
    });
    and making sure you are loding the scripts from both:

    http://phpjs.org/functions/htmlentities:425

    and

    http://phpjs.org/functions/get_html_...tion_table:416
    This works WONDERS! AWESOME THANKS! (sorry caps I've been on this a while)

    I see that you are alerting #hphrase is there a way to replace the text inside #hphrase input fields?

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    $(document).ready(function(){
    	$('#runit').click(function(){
    		$('#hphrase').val(htmlentities($('#hphrase').val()));
    	});
    });
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #11
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV View Post
    Code:
    $(document).ready(function(){
    	$('#runit').click(function(){
    		$('#hphrase').val(htmlentities($('#hphrase').val()));
    	});
    });
    Ahhh shucks, this only does it to one field. So I'm assuming if I name all my inputs #hphrase it won't correct them all?

  • #12
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    killin me

    Code:
    $(document).ready(function(){
    	$('#runit').click(function(){
    		$('#myForm :input[type=text]').each(function(){
    			$(this).val(htmlentities($(this).val()));
    		});
    	});
    });
    Code:
    <form action="" method="" id="myForm">
    <fieldset>
    <label for="hphrase">Enter phrase:</label>
    <input type="text" name="hphrase1" id="hphrase1" value="" tabindex="1" />
    <input type="text" name="hphrase2" id="hphrase2" value="" tabindex="2" />
    <input type="text" name="hphrase3" id="hphrase3" value="" tabindex="3" />
    </fieldset>
    <input type="button" value="Convert" tabindex="5" id="runit" />
    </form>
    Last edited by harbingerOTV; 09-22-2010 at 10:48 PM. Reason: added [type=text] to prevent default values from being changed on stuff like radios etc...
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #13
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Cool

    Quote Originally Posted by harbingerOTV View Post
    killin me

    Code:
    $(document).ready(function(){
    	$('#runit').click(function(){
    		$('#myForm :input[type=text]').each(function(){
    			$(this).val(htmlentities($(this).val()));
    		});
    	});
    });
    Code:
    <form action="" method="" id="myForm">
    <fieldset>
    <label for="hphrase">Enter phrase:</label>
    <input type="text" name="hphrase1" id="hphrase1" value="" tabindex="1" />
    <input type="text" name="hphrase2" id="hphrase2" value="" tabindex="2" />
    <input type="text" name="hphrase3" id="hphrase3" value="" tabindex="3" />
    </fieldset>
    <input type="button" value="Convert" tabindex="5" id="runit" />
    </form>
    Haha

    This is funny because it is a form with a lot of inputs and if they hit convert again the "&quot;" gets turned into "&amp;quot;" because of the ampersand in front of the string. I'm thinking of making the button.visible=false but, next time they come to validate the form the script will see "&" and convert those as well. lol this is something else. I only need to replace quotes and double quotes which is the funny thing. I sent you a PM by the way.

  • #14
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    well if it's just those 2 characters you could just use this:
    Code:
    $(document).ready(function(){
    	$('#runit').click(function(){
    		$('#myForm :input[type=text]').each(function(){
    			//$(this).val(htmlentities($(this).val()));
    			$(this).val($(this).val().replace(/'/g,'&#39;'));
    			$(this).val($(this).val().replace(/"/g,'&quot;'));
    			
    		});
    	});
    });
    no need to call those other two big scripts.

    if you only want it to happen once, like even if they push "convert" again it does nothing, you can remove the ID from the button like:

    Code:
    $(document).ready(function(){
    	$('#runit').click(function(){
    		$('#myForm :input[type=text]').each(function(){
    			//$(this).val(htmlentities($(this).val()));
    			$(this).val($(this).val().replace(/'/g,'&#39;'));
    			$(this).val($(this).val().replace(/"/g,'&quot;'));
    			
    		});
    	$(this).attr('id', '');
    	});
    });
    but I am assuming this is so that the values are converted and then placed into a database so you could attach the click to a submit button like:

    Code:
    $(document).ready(function(){
    	$('#myForm').submit(function(){
    		$('#myForm :input[type=text]').each(function(){
    			//$(this).val(htmlentities($(this).val()));
    			$(this).val($(this).val().replace(/'/g,'&#39;'));
    			$(this).val($(this).val().replace(/"/g,'&quot;'));
    			
    		});
    	});
    });
    Code:
    <form action="no.html" method="" id="myForm">
    <fieldset>
    <label for="hphrase">Enter phrase:</label>
    <input type="text" name="hphrase" id="hphrase1" value="" tabindex="1" />
    <input type="text" name="hphrase" id="hphrase2" value="" tabindex="2" />
    <input type="text" name="hphrase" id="hphrase3" value="" tabindex="3" />
    <input type="checkbox" value="apples & oranges" />stuff
    </fieldset>
    <input type="submit" value="Convert" tabindex="5" id="runit" />
    </form>
    that way the form gets submitted and they can't hit "convert" again.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    pcproff (09-24-2010)

  • #15
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts
    You sir are the man! Thanks for all your help! Now to the book store to get a book on jquery.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •