Add util function for generating classes/ids from any string

modules/presets/field.js

@@ -1,5 +1,5 @@
 import { t } from '../util/locale';
-
+import { utilSafeClassName } from '../util/util';
 
 export function presetField(id, field) {
     field = Object.assign({}, field);   // shallow copy
@@ -7,7 +7,7 @@ export function presetField(id, field) {
     field.id = id;
 
     // for use in classes, element ids, css selectors
-    field.safeid = id.replace(/[^_a-zA-Z0-9\-]/g, '_');
+    field.safeid = utilSafeClassName(id);
 
     field.matchGeometry = function(geometry) {
         return !field.geometry || field.geometry === geometry;

modules/presets/preset.js

@@ -1,6 +1,7 @@
 import { t } from '../util/locale';
 import { osmAreaKeys } from '../osm/tags';
 import { utilArrayUniq, utilObjectOmit } from '../util';
+import { utilSafeClassName } from '../util/util';
 
 
 export function presetPreset(id, preset, fields, visible, rawPresets) {
@@ -8,6 +9,9 @@ export function presetPreset(id, preset, fields, visible, rawPresets) {
 
     preset.id = id;
 
+    // for use in classes, element ids, css selectors
+    preset.safeid = utilSafeClassName(id);
+
     preset.parentPresetID = function() {
         var endIndex = preset.id.lastIndexOf('/');
         if (endIndex < 0) return null;

modules/util/index.js

@@ -34,6 +34,7 @@ export { utilPrefixDOMProperty } from './util';
 export { utilPreset } from './util';
 export { utilQsString } from './util';
 export { utilRebind } from './rebind';
+export { utilSafeClassName } from './util';
 export { utilSetTransform } from './util';
 export { utilSessionMutex } from './session_mutex';
 export { utilStringQs } from './util';

modules/util/util.js

@@ -417,3 +417,9 @@ export function utilHashcode(str) {
     }
     return hash;
 }
+
+// returns version of `str` with all runs of special characters replaced by `_`;
+// suitable for HTML ids, classes, selectors, etc.
+export function utilSafeClassName(str) {
+    return str.toLowerCase().replace(/[^a-z0-9]+/g, '_');
+}