如何替换jQuery $ .trim（）？

Question

I'm using jQuery in a website has a polyfill for the built-in String.trim() . Site used to run in IE 8 a lot and needed the polyfill, but it doesn't anymore. Unfortunately I can't remove the polyfill from the page -- I don't have permissions to touch that and there is no possible way for me to remove it -- so this bit of code runs before anything I can control:

String.prototype.trim = function() {
    return this.replace(/^\s\s*/, "").replace(/\s\s*$/, "")
}

Then jQuery comes along and does this, not realizing that the native String.trim has already by messed with:

// Use native String.trim function wherever possible
trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
    function( text ) {
        return text == null ?
            "" :
            core_trim.call( text );
    } :

    // Otherwise use our own trimming functionality
    function( text ) {
        return text == null ?
            "" :
            ( text + "" ).replace( rtrim, "" );
    },

Up to now this hasn't really been much of a problem, but I'm using the Datatables plugin for jQuery and it has many places where it calls $.trim() on data that isn't a string, like number or arrays. The native code in IE 11 and Chrome (the browsers we target) knows to just return the value of $.trim(6) , but the polyfill doesn't.

I tried redefining the the prototype with a function that should work:

String.prototype.trim = function(){
   if(typeof this.valueOf(this) === 'string'){
       return this.replace(/^\s\s*/, "").replace(/\s\s*$/, "");
   } else {
       return this.valueOf(this);
   }
} 

But that didn't work because jQuery has already extend using the polyfill and further changes to the prototype won't change what jQuery is using.

I tried following this thread to redefine $.trim(), but that didn't work.

Is there a way to return String.prototype.trim() to its native code?

Is there a way to redefine $.trim()?

Some other idea I haven't thought of?

Answer 1

You can override jQuery core methods

 (function(){ var string = " TRIM ME "; console.log(jQuery.trim(string)); // Define overriding method. jQuery.trim = function(string){ return string; } console.log(jQuery.trim(string)); })(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

Simply override jQuery's $.trim() using String.prototype.trim() , then override String.prototype.trim() with your function:

 var trimText = " Some text "; String.prototype.trim = function() { return this.replace(/^\\s\\s*/, "").replace(/\\s\\s*$/, "") } $.trim = function(string) { return String.prototype.trim(string); } trimText = trimText.trim(); console.log(trimText); 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 

Answer 3

Based on Jack Bashford's answer I came up with this.

String.prototype.trim = function(){
  if(typeof this.valueOf(this) === 'string'){
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  } else {
    return this.valueOf(this);
  }
};

$.trim = function(e){
    return String.prototype.trim.call(e);
};

Part of the original problem was that I needed to fix it so that if $.trim(number) or $.trim(array) was called it wouldn't throw and error.