Special Character Replace with Jquery

pcproff · 09-20-2010, 05:29 PM

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‘s so many options out there</input>

</form>

Any help would be awesome thank you!

DrDOS · 09-21-2010, 01:38 AM

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('"','&#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.

SB65 · 09-21-2010, 11:45 AM

Sounds like the OP wants a javascript equivalent to the php function htmlentities. You could try this link.

pcproff · 09-22-2010, 06:22 PM

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.

pcproff · 09-22-2010, 06:26 PM

Quote:

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.

SB65 · 09-22-2010, 06:34 PM

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.

pcproff · 09-22-2010, 08:02 PM

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 & 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>

harbingerOTV · 09-22-2010, 09:30 PM

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

pcproff · 09-22-2010, 10:02 PM

Quote:

Originally Posted by harbingerOTV

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?

harbingerOTV · 09-22-2010, 10:14 PM

Code:

$(document).ready(function(){
	$('#runit').click(function(){
		$('#hphrase').val(htmlentities($('#hphrase').val()));
	});
});

pcproff · 09-22-2010, 10:23 PM

Quote:

Originally Posted by harbingerOTV

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?

harbingerOTV · 09-22-2010, 10:33 PM

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>

pcproff · 09-22-2010, 11:00 PM

Quote:

Originally Posted by harbingerOTV

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 """ gets turned into "&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.

harbingerOTV · 09-22-2010, 11:27 PM

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,'''));
			$(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,'''));
			$(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,'''));
			$(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.

pcproff · 09-23-2010, 11:23 PM

You sir are the man! Thanks for all your help! Now to the book store to get a book on jquery.