Boxed character regions [duplicate]

Question

Given an input string, determine the number of regions that a page will be split into.

Consider the letter P. It has one enclosed region within the letter. Assume that each letter splits the page by one or more regions (i.e. a box is drawn around the character).

Input

A string of 0 or more characters. You may assume that the string contains only characters from the following sets:

• +0 regions: Spaces , tabs \t, and new lines \n
• +1 region: CEFGHIJKLMNSTUVWXYZcfhijklmnrstuvwxyz12357~!^*()-_=+[]{}\'|:;",.?/<>
• +2 regions:ADOPQRabdeopq469@#
• +3 regions: Bg08$%&

You may take the input as a function argument, standard input, command-line argument, whatever works best for your language.

Output

An integer representing the number of regions split by the given input. Output can be a return value or standard output (but not stderr).

This is code-golf, so shortest solution in bytes win.

Test cases

• (empty string or only whitespace) === 1
• -1 === 3
• 100% === 11
• Hello world! === 16
• May the force be with you === 28
• do {$busTickets-=2;} while ($transit != false) === 54
• return @$_GET['foo'] ?? $$var % $var || $g8 << ; //# Syntax error === 80

Feel free to use the demo in my JavaScript answer (with a compatible browser of course) to run test cases.

Visual representation

Note: The visual representation for the characters g and 0 (zero) may not be entirely correct depending on the monospaced font that your computer has installed.

For the purposes of this challenge, assume that the bottom of the g has a closed loop and the 0 has a slash through it.

(function() {
  'use strict';
  [
    'CEFGHIJKLMNSTUVWXYZcfhijklmnrstuvwxyz12357~!^*()-_=+[]{}\\\'|:;"<,>.?/`',
    'ADOPQRabdeopq469@#',
    'Bg08$%&'
  ].forEach(function(set, i) {
    set.split('').sort().forEach(function(letter) {
      var p = document.querySelectorAll('section[data-letter-regions="' + (i + 1) + '"]')[0];
      console.log(p)
      var el = document.createElement('span');
      el.setAttribute('class', 'letter');
      el.textContent = letter;
      p.appendChild(el);
    });
  });

}());

h1 {
  font-family: sans-serif;
}
section + section {
  border-top: medium solid purple;
}
.letter {
  font-family: Consolas, 'Droid Sans Mono', monospace;
  font-size: 3em;
  line-height: 1;
  padding: 3px;
  margin: 3px;
  display: inline-block;
  border: thin solid darkgray;
}

<section data-letter-regions=1>
  <h1>1 region</h1>
</section>
<section data-letter-regions=2>
  <h1>2 regions</h1>
</section>
<section data-letter-regions=3>
  <h1>3 regions</h1>
</section>

Answer 1

JavaScript (ES6), 94 bytes

f=x=>[...x].reduce((p,z)=>p+!!z.trim()+2*/[Bg08$%&]/.test(z)+/[ADOPQRabdeopq469@#]/.test(z),1)

Demo

As the code is in ES6, the demo only works in ES6-compatible browsers. At time of writing, this includes Firefox, Edge, and Chrome/Opera with experimental JavaScript features enabled.

f = x => [...x].reduce((p, z) => p + !!z.trim() + 2 * /[Bg08$%&]/.test(z) + /[ADOPQRabdeopq469@#]/.test(z), 1)

// Snippet stuff
var v = function() {document.getElementById('Z').textContent = f(this.value)};
document.getElementById('I').addEventListener('keyup', v, false);
document.getElementById('I').addEventListener('change', v, false);

textarea {width: 100%}

<p><label>Input: <textarea id=I></textarea></label></p>

<p>Output: <output id=Z>1</output></p>