Text widget breaks code sometimes, and it's inconsistent

[programmin]

I add the following in a text widget:

<script type="text/javascript">
loadCountdown = function(data){
      var seconds_till;
      $("#churchonline_counter").show();
      if (data.response.item.isLive) {
        return goLive();
      } else {
        // Parse ISO 8601 date string
        date = data.response.item.eventStartTime.match(/^(\d{4})-0?(\d+)-0?(\d+)[T ]0?(\d+):0?(\d+):0?(\d+)Z$/)
        dateString = date[2] + "/" + date[3] + "/" + date[1] + " " + date[4] + ":" + date[5] + ":" + date[6] + " +0000"
        seconds_till = ((new Date(dateString)) - (new Date())) / 1000;
        days = Math.floor(seconds_till / 86400);
        hours = Math.floor((seconds_till % 86400) / 3600);
        minutes = Math.floor((seconds_till % 3600) / 60);
        seconds = Math.floor(seconds_till % 60);
        return intervalId = setInterval(function() {
          if (--seconds < 0) {
            seconds = 59;
            if (--minutes < 0) {
              minutes = 59;
              if (--hours < 0) {
                hours = 23;
                if (--days < 0) {
                  days = 0;
                }
              }
            }
          }
          $("#churchonline_counter .days").html((days.toString().length < 2) ? "0" + days : days);
          $("#churchonline_counter .hours").html((hours.toString().length < 2 ? "0" + hours : hours));
          $("#churchonline_counter .minutes").html((minutes.toString().length < 2 ? "0" + minutes : minutes));
          $("#churchonline_counter .seconds").html((seconds.toString().length < 2 ? "0" + seconds : seconds));
          if (seconds === 0 && minutes === 0 && hours === 0 && days === 0) {
            goLive();
            return clearInterval(intervalId);
          }
        }, 1000);
      }
    }
</script>

and it breaks all js on the page, turns && into odd ampersand characters.

The odd thing is that adding a text widget with this code inside it, does not break and change it into odd ampersand characters:

<script type="text/javascript">
loadCountdown = function(data){
          if (seconds === 0 && minutes === 0 && hours === 0 && days === 0) {
            goLive();
          }
    }
</script>

Tested on 4.9.7 and 4.9.6. Some regex/processing must be corrupting it in more complex cases like this.

[westonruter]

@programmin I assume this code similarly has problems as post content? You should be putting JS code inside of a Custom HTML widget not the Text widget.

For more, see ​https://make.wordpress.org/core/2017/08/01/fixes-to-text-widget-and-introduction-of-custom-html-widget-in-4-8-1/

[programmin]

That works there, but still many people are using text widget system.

remove_filter('widget_text_content', 'wptexturize');

makes it not output the weird ampersand inconsistently in the one example but not the other, so the bug is in that function.

[westonruter]

You can add that filter on your own install if you like, but in core the goal is consistency between the Text widgets and the post editor. The solutions were debated extensively in #40951.