jQuery:将字符串转换为"手柄;类似于Shopify's Handleize

jQuery: Convert string to "handle" similar to Shopify's Handleize

本文关键字：手柄 类似于 Handleize Shopify quot 字符串 转换 jQuery      更新时间：2023-09-26

我正试图用jQuery做与Shopify的"handleize"对字符串所做的相同的事情。

https://docs.shopify.com/themes/liquid-documentation/filters/string-filters#handle

基本上，我想将任何字符串转换为句柄，所以

你好，我叫科里。

将成为

你好，我叫科里

使用jQuery函数。

实际上，您应该使用regex和字符串替换来实现这一点，而不是jQuery。

var name = "Hello, my name is Corey.";
name = name.toLowerCase().replace(/ /g,'-');

您还需要删除所有其他非字母数字字符，如不可见字符、大多数unicode等，因为这很可能会导致类似问题。

name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-$/, '').replace(/^-/, '');

当你输入文本并输出结果时，我对slugify字符串进行了一个小的jQuery扩展：

jquery.slug.js:

jQuery.fn.slug = function(options) {
    var defaults = {
        events: 'keypress keyup blur',
        targets: ['#slug', '#hidden']
    };
    var opts  = jQuery.extend(defaults, options);
    jQuery(this).on(opts.events, function(){
      var slug = $(this).val().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-$/, '').replace(/^-/, '');
      jQuery.each(opts.targets, function(index, element) {
        $(element).val(slug);  // input or textarea
        $(element).html(slug); // other dom elements
      });
    });
};

用法：

$('input[name="some-text-input"]').slug({targets: ['#some-id', 'input[name="some-name"]']});


/* Try this one */
function handleize(text) {
    return text.toString().toLowerCase()
               .replace(/'s+/g, '-')           // Replace spaces with -
               .replace(/[^'w'-]+/g, '')       // Remove all non-word chars
               .replace(/'-'-+/g, '-')         // Replace multiple - with single -
               .replace(/^-+/, '')             // Trim - from start of text
               .replace(/-+$/, '');            // Trim - from end of text
}
console.log(handleize("Hello, my name is Corey."));

相关文章：