一个可行的转换怎么可能看起来像将产品名称转换为有效的 HTML id 属性值？

Question

有产品数据列表。每个产品项都有一个 string 类型 name-属性.

可行的转换如何将产品名称转换为有效的 HTML id-attribute 值？

可行意味着转换的构建方式几乎不可能从两个不同但相似的构造产品名称生成相同的 ID。

常见产品的命名是这样的...

"2-inch leg extension"
"2' x 8' Overhead Garage Storage Rack"
"4 Drawer Base Cabinet 16-1/2"W x 35"H x 22-1/2"D"
"24" Long Tool Bar w/ Hooks Accessory"

有效转换后，上面的列表可能看起来像这样...

"z2-inchlegextension"
"z2x8OverheadGarageStorageRack"
"z4DrawerBaseCabinet16-12Wx35Hx22-12D"
"z24LongToolBarwHooksAccessory"

可以考虑为要生成的 id 提供前缀（例如 "z"），以便使其成为有效的 HTML id-attribute.

我不熟悉确保结果可重复一致的替换技术。

可能的转换方法是什么样的？

Answer 1

满足您要求的最简单答案：

string.replace(/[^A-Za-z]/g, "");

如果没有字母字符，这将导致空字符串。但是由于 ID 无论如何都需要以字母开头，因此您需要对产品名称中没有字母的情况进行特殊处理

Answer 2

你可以试试这个-

const data = [
  "2-inch leg extension",
  "2' x 8' Overhead Garage Storage Rack",
  "4 Drawer Base Cabinet 16-1/2\"W x 35\"H x 22-1/2\"D",
  "24\" Long Tool Bar w/ Hooks  Accessory"
];

const res = data.map(str => str.replace(/[^a-z\d\-_]/ig, ''));

console.log(res);

如果您需要带有 ID 的任何前缀，请将其添加为-

const prefix = 'Z';
const res = data.map(str => prefix + str.replace(/[^a-z\d\-_]/ig, ''));

Answer 3

以下方法创建可配置的标识符。

它还尽可能多地保留给定产品名称的信息，以防止意外创建重复标识符。

它通过尽可能多地翻译技术措施、单位和术语的字符串模式来做到这一点。

const productNameList = [
  "2-inch leg extension",
  "2' x 8' Overhead Garage Storage Rack",
  '4 Drawer Base Cabinet 16-1/2"W x 35"H x 22-1/2"D',
  '24" Long Tool Bar w/ Hooks  Accessory'
];

function createIdentifier(str) {
  const config = this;

  const prefix = config.prefix || '_';
  const separator = config.separator || '';

  const id = [prefix, str

    // replace foot symbol that follows immediately after a digit
    .replace((/([\d])'/g), `${ separator }Ft`)

    // replace inch symbol (double quote character)
    .replace((/"/g), `${ separator }In${ separator }`)

    // replace times character enclosed by word boundaries
    .replace((/\bx\b/g), 'Times')

    // replace digit connector, a minus symbol enclosed by digits
    .replace((/([\d])-([\d])/g), `${ separator }And${ separator }`)

    // replace division symbol that is enclosed by digits
    .replace((/([\d])\/([\d])/g), `${ separator }By${ separator }`)

    // uppercase any character that follows a word boundary
    .replace((/\b([\w])/g), ([]) => .toUpperCase())

     // replace/delete all non word characters.
    .replace((/[\W]+/g), separator)

  ].join('');

  return ((separator && id.toLowerCase()) || id);
}


console.log(
  productNameList,
  ' => HTML id attribute => ',
  productNameList.map(createIdentifier, { prefix: 'pid_' })
);

console.log(
  productNameList,
  ' => HTML id attribute (long) => ',
  productNameList.map(createIdentifier, { prefix: 'pid_', separator: '-' })
);

console.log(
  productNameList,
  ' => valid JS variable name => ',
  productNameList.map(createIdentifier)
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

一个可行的转换怎么可能看起来像将产品名称转换为有效的 HTML id 属性值？

How could a viable transformation look like that does convert a product-name into a valid HTML id-attribute value?

javascript

regex

string

replace

transform