esc_js( string $text ): string

User Contributed Notes

1. Skip to note 3 content

   Weston Ruter 9 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

   I don’t really see the value of using esc_js() anymore. If you really have to do an inline script attribute, you may want to consider the following example with wp_json_encode() and esc_attr(), which seems easier to read and maintain:

   <?php
   $onfocus = sprintf( 
   	'if ( %s === this.value ) { this.value = ""; }',
   	wp_json_encode( $instance['input_text'] )
   );
   $onblur = sprintf(
   	'if ( "" === this.value ) { this.value = %s; }',
   	wp_json_encode( $instance['input_text'] )
   );
   ?>
   <input id="subbox" type="text" name="email"
   	value="<?php echo esc_attr( $instance['input_text'] ); ?>"
   	onfocus="<?php echo esc_attr( $onfocus ); ?>"
   	onblur="<?php echo esc_attr( $onblur ); ?>" />

   But in actuality, this specific example doesn’t need any PHP in its script attributes at all. The following should have the same result, thanks to the defaultValue property on the HTMLInputElement interface:

   <input id="subbox" type="text" name="email"
   	value="<?php echo esc_attr( $instance['input_text'] ); ?>"
   	onfocus="if ( this.defaultValue === this.value ) { this.value = ''; }"
   	onblur="if ( '' === this.value ) { this.value = this.defaultValue; }" />

   • But for the sake of filters, you should use esc_js() where javascript is using the value. You see when you use esc_attr(), the output is filtered with attribute_escape. But for esc_js(), output is filtered with js_escape hook. So other plugins can know it’s being escaped for js usage.

     Sohan Zaman 7 years ago
2. Skip to note 4 content

   Codex 10 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: -1You must log in to vote on the helpfulness of this note

   Example

   Example of an input tag within a form displayed on the front-end of the site, generated from a widget. The first php segment is using esc_attr as it is an html attribute of input, while the next php segments is using esc_js within inline JavasSript.

   <input type="text" value="<?php echo esc_attr( $instance['input_text'] ); ?>" id="subbox" onfocus="if ( this.value == '<?php echo esc_js( $instance['input_text'] ); ?>') { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = '<?php echo esc_js( $instance['input_text'] ); ?>'; }" name="email" />

   If you’re not working with inline JS in HTML event handler attributes, a more suitable function to use is wp_json_encode() , which is built-in to WordPress. (wp_json_encode() includes the string-delimiting quotes for you):

   var title = <?php echo wp_json_encode( $instance['title'] ) ?>;