Bir başlık jQuery bir URL slug dönüştürmek nasıl?


163

CodeIgniter bir uygulama üzerinde çalışıyorum ve dinamik olarak URL slug oluşturmak bir form üzerinde bir alan yapmaya çalışıyorum. Yapmak istediğim noktalama işaretlerini kaldırmak, küçük harfe dönüştürmek ve boşlukları kısa çizgilerle değiştirmek. Yani, örneğin, Shane'in Kaburga Kulübesi bacalar-kaburga kulübesi haline gelirdi.

İşte şimdiye kadar sahip olduğum şey. Küçük harf kolaydı, ancak değiştirme hiç çalışmıyor gibi görünüyor ve noktalama işaretlerini kaldırmak için hiçbir fikrim yok:

$("#Restaurant_Name").keyup(function(){
    var Text = $(this).val();
    Text = Text.toLowerCase();
    Text = Text.replace('/\s/g','-');
    $("#Restaurant_Slug").val(Text);    
});

2
JQuery değil, ancak 'talkingurl' veya 'node-slug' kütüphanelerine bakın
Kevin Wheeler

... veya slugify
x-yuri

Yanıtlar:


380

'Slug' teriminin nereden geldiğini bilmiyorum, ama işte başlıyoruz:

function convertToSlug(Text)
{
    return Text
        .toLowerCase()
        .replace(/ /g,'-')
        .replace(/[^\w-]+/g,'')
        ;
}

İlk değiştirme boşlukları kısa çizgilere değiştirir, ikinci değiştirme alfasayısal, alt çizgi veya kısa çizgi olmayan her şeyi kaldırır.

"Like - this" haline dönüşmek "like --- this" gibi şeyler istemiyorsanız, bunun yerine bunu kullanabilirsiniz:

function convertToSlug(Text)
{
    return Text
        .toLowerCase()
        .replace(/[^\w ]+/g,'')
        .replace(/ +/g,'-')
        ;
}

Bu, ilk değiştirmedeki tireleri (ancak boşlukları değil) kaldıracak ve ikinci değiştirmede ardışık boşlukları tek bir tireye yoğunlaştıracaktır.

Yani "böyle - bu" "böyle" olarak çıkıyor.


1
ayrılmış çoklu dizinlere ihtiyacınız varsa "/" eklemeyi unutmayın
Val

6
"slug" terimi wordpress'ten geldi
Brynner Ferreira

18
Birden fazla sıralı tireyi önlemek için text.toLowerCase().replace(/ /g,'-').replace(/[-]+/g, '-').replace(/[^\w-]+/g,'');, seçenek 2 yerine kullandım . Seçenek 2 "th - is" değerini "this" olarak değiştirir.
Ryan Allen

URL'de noktaya nasıl izin verebilirim?
Idan Shechter

Bilgi fişinde "_" olmaması için .replace (/ + / g, '-') .replace (/ + | _ / g, '-') olarak geçersiz kılın.
Odin Thunder

112
var slug = function(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim
  str = str.toLowerCase();

  // remove accents, swap ñ for n, etc
  var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
  var to   = "aaaaaeeeeeiiiiooooouuuunc------";
  for (var i=0, l=from.length ; i<l ; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }

  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
    .replace(/\s+/g, '-') // collapse whitespace and replace by -
    .replace(/-+/g, '-'); // collapse dashes

  return str;
};

ve dene

slug($('#field').val())

orijinal: http://dense13.com/blog/2009/05/03/converting-string-to-slug-javascript/


EDIT: dile özgü karakterler için genişletildi:

var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆĞÍÌÎÏİŇÑÓÖÒÔÕØŘŔŠŞŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇğíìîïıňñóöòôõøðřŕšşťúůüùûýÿžþÞĐđßÆa·/_,:;";
var to   = "AAAAAACCCDEEEEEEEEGIIIIINNOOOOOORRSSTUUUUUYYZaaaaaacccdeeeeeeeegiiiiinnooooooorrsstuuuuuyyzbBDdBAa------";

6
Ama doğru değil. Almanca metinlerde, vb. üue
İle yer

5
@feklee: "Doğru değil" Almanca (ve muhtemelen diğer diller için) doğrudur, ancak diğer dillerde sorun yoktur. İngilizce bir web sitesi için "Márföldi" nin (Macar kökenli soyadı) Almanların yaptığı gibi "marfoeldi" ye değil "marfoldi" ye dönüştürülmesini istiyorum.
michalstanko

1
Platformlar arası uyumluluğu sağlamak için = "\ u00E3 \ u00E0 \ u00E1 \ u00E4 \ u00E2 \ u1EBD \ u00E8 \ u00E9 \ u00EB \ u00EA \ u00EC \ u00ED \ u00EF \ u00EE \ u00F5 \ u00 \ 3F2F2F2 u00F6 \ u00F4 \ u00F9 \ u00FA \ u00FC \ u00FB \ u00F1 \ u00E7 \ U00B7 / _,:; ';
Mike Godin

1
Güzel çözüm! İskandinav åolsa eksik .
Fredric

1
Ekleyebilir İĞŞığşiçin fromdeğişken ve onları dönüştürmek IGSigsTürk karakterleri desteklemek için.
CemilF

19

Her şeyden önce, düzenli ifadeler yüzden, tırnak çevresindeki olmamalıdır '/ \ s / g' olmalıdır / \ s / g

Alfasayısal olmayan tüm karakterleri tire işareti ile değiştirmek için, bunun çalışması gerekir (örnek kodunuzu kullanarak):

$("#Restaurant_Name").keyup(function(){
        var Text = $(this).val();
        Text = Text.toLowerCase();
        Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
        $("#Restaurant_Slug").val(Text);        
});

Hile yapmalı ...


8

İngilizce için iyi ve eksiksiz bir çözüm buldum

function slugify(string) {
  return string
    .toString()
    .trim()
    .toLowerCase()
    .replace(/\s+/g, "-")
    .replace(/[^\w\-]+/g, "")
    .replace(/\-\-+/g, "-")
    .replace(/^-+/, "")
    .replace(/-+$/, "");
}

Kullanımdaki bazı örnekler:

slugify(12345);
// "12345"

slugify("  string with leading   and   trailing whitespace    ");
// "string-with-leading-and-trailing-whitespace"

slugify("mIxEd CaSe TiTlE");
// "mixed-case-title"

slugify("string with - existing hyphens -- ");
// "string-with-existing-hyphens"

slugify("string with Special™ characters");
// "string-with-special-characters"

Andrew Stewart'a teşekkürler


8

Umarım bu birinin gününü kurtarabilir ...

/* Encode string to slug */
function convertToSlug( str ) {
	
  //replace all special characters | symbols with a space
  str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ').toLowerCase();
	
  // trim spaces at start and end of string
  str = str.replace(/^\s+|\s+$/gm,'');
	
  // replace space with dash/hyphen
  str = str.replace(/\s+/g, '-');	
  document.getElementById("slug-text").innerHTML= str;
  //return str;
}
<input type="text" onload="convertToSlug(this.value)" onkeyup="convertToSlug(this.value)" value="Try it Yourself"/>
<p id="slug-text"></p>


7

Tek ihtiyacınız olan bir artı oldu :)

$("#Restaurant_Name").keyup(function(){
        var Text = $(this).val();
        Text = Text.toLowerCase();
        var regExp = /\s+/g;
        Text = Text.replace(regExp,'-');
        $("#Restaurant_Slug").val(Text);        
});

6

Https://gist.github.com/sgmurphy/3095196 adresinde Sean Murphy tarafından geliştirilen URL'leri sterilize etmek için bu bilgi işlevine bir göz atın.

/**
 * Create a web friendly URL slug from a string.
 *
 * Requires XRegExp (http://xregexp.com) with unicode add-ons for UTF-8 support.
 *
 * Although supported, transliteration is discouraged because
 *     1) most web browsers support UTF-8 characters in URLs
 *     2) transliteration causes a loss of information
 *
 * @author Sean Murphy <sean@iamseanmurphy.com>
 * @copyright Copyright 2012 Sean Murphy. All rights reserved.
 * @license http://creativecommons.org/publicdomain/zero/1.0/
 *
 * @param string s
 * @param object opt
 * @return string
 */
function url_slug(s, opt) {
    s = String(s);
    opt = Object(opt);

    var defaults = {
        'delimiter': '-',
        'limit': undefined,
        'lowercase': true,
        'replacements': {},
        'transliterate': (typeof(XRegExp) === 'undefined') ? true : false
    };

    // Merge options
    for (var k in defaults) {
        if (!opt.hasOwnProperty(k)) {
            opt[k] = defaults[k];
        }
    }

    var char_map = {
        // Latin
        'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE', 'Ç': 'C', 
        'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I', 
        'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ő': 'O', 
        'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ű': 'U', 'Ý': 'Y', 'Þ': 'TH', 
        'ß': 'ss', 
        'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c', 
        'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i', 
        'ð': 'd', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ő': 'o', 
        'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u', 'ű': 'u', 'ý': 'y', 'þ': 'th', 
        'ÿ': 'y',

        // Latin symbols
        '©': '(c)',

        // Greek
        'Α': 'A', 'Β': 'B', 'Γ': 'G', 'Δ': 'D', 'Ε': 'E', 'Ζ': 'Z', 'Η': 'H', 'Θ': '8',
        'Ι': 'I', 'Κ': 'K', 'Λ': 'L', 'Μ': 'M', 'Ν': 'N', 'Ξ': '3', 'Ο': 'O', 'Π': 'P',
        'Ρ': 'R', 'Σ': 'S', 'Τ': 'T', 'Υ': 'Y', 'Φ': 'F', 'Χ': 'X', 'Ψ': 'PS', 'Ω': 'W',
        'Ά': 'A', 'Έ': 'E', 'Ί': 'I', 'Ό': 'O', 'Ύ': 'Y', 'Ή': 'H', 'Ώ': 'W', 'Ϊ': 'I',
        'Ϋ': 'Y',
        'α': 'a', 'β': 'b', 'γ': 'g', 'δ': 'd', 'ε': 'e', 'ζ': 'z', 'η': 'h', 'θ': '8',
        'ι': 'i', 'κ': 'k', 'λ': 'l', 'μ': 'm', 'ν': 'n', 'ξ': '3', 'ο': 'o', 'π': 'p',
        'ρ': 'r', 'σ': 's', 'τ': 't', 'υ': 'y', 'φ': 'f', 'χ': 'x', 'ψ': 'ps', 'ω': 'w',
        'ά': 'a', 'έ': 'e', 'ί': 'i', 'ό': 'o', 'ύ': 'y', 'ή': 'h', 'ώ': 'w', 'ς': 's',
        'ϊ': 'i', 'ΰ': 'y', 'ϋ': 'y', 'ΐ': 'i',

        // Turkish
        'Ş': 'S', 'İ': 'I', 'Ç': 'C', 'Ü': 'U', 'Ö': 'O', 'Ğ': 'G',
        'ş': 's', 'ı': 'i', 'ç': 'c', 'ü': 'u', 'ö': 'o', 'ğ': 'g', 

        // Russian
        'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'Yo', 'Ж': 'Zh',
        'З': 'Z', 'И': 'I', 'Й': 'J', 'К': 'K', 'Л': 'L', 'М': 'M', 'Н': 'N', 'О': 'O',
        'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U', 'Ф': 'F', 'Х': 'H', 'Ц': 'C',
        'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sh', 'Ъ': '', 'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu',
        'Я': 'Ya',
        'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 'ж': 'zh',
        'з': 'z', 'и': 'i', 'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o',
        'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f', 'х': 'h', 'ц': 'c',
        'ч': 'ch', 'ш': 'sh', 'щ': 'sh', 'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu',
        'я': 'ya',

        // Ukrainian
        'Є': 'Ye', 'І': 'I', 'Ї': 'Yi', 'Ґ': 'G',
        'є': 'ye', 'і': 'i', 'ї': 'yi', 'ґ': 'g',

        // Czech
        'Č': 'C', 'Ď': 'D', 'Ě': 'E', 'Ň': 'N', 'Ř': 'R', 'Š': 'S', 'Ť': 'T', 'Ů': 'U', 
        'Ž': 'Z', 
        'č': 'c', 'ď': 'd', 'ě': 'e', 'ň': 'n', 'ř': 'r', 'š': 's', 'ť': 't', 'ů': 'u',
        'ž': 'z', 

        // Polish
        'Ą': 'A', 'Ć': 'C', 'Ę': 'e', 'Ł': 'L', 'Ń': 'N', 'Ó': 'o', 'Ś': 'S', 'Ź': 'Z', 
        'Ż': 'Z', 
        'ą': 'a', 'ć': 'c', 'ę': 'e', 'ł': 'l', 'ń': 'n', 'ó': 'o', 'ś': 's', 'ź': 'z',
        'ż': 'z',

        // Latvian
        'Ā': 'A', 'Č': 'C', 'Ē': 'E', 'Ģ': 'G', 'Ī': 'i', 'Ķ': 'k', 'Ļ': 'L', 'Ņ': 'N', 
        'Š': 'S', 'Ū': 'u', 'Ž': 'Z', 
        'ā': 'a', 'č': 'c', 'ē': 'e', 'ģ': 'g', 'ī': 'i', 'ķ': 'k', 'ļ': 'l', 'ņ': 'n',
        'š': 's', 'ū': 'u', 'ž': 'z'
    };

    // Make custom replacements
    for (var k in opt.replacements) {
        s = s.replace(RegExp(k, 'g'), opt.replacements[k]);
    }

    // Transliterate characters to ASCII
    if (opt.transliterate) {
        for (var k in char_map) {
            s = s.replace(RegExp(k, 'g'), char_map[k]);
        }
    }

    // Replace non-alphanumeric characters with our delimiter
    var alnum = (typeof(XRegExp) === 'undefined') ? RegExp('[^a-z0-9]+', 'ig') : XRegExp('[^\\p{L}\\p{N}]+', 'ig');
    s = s.replace(alnum, opt.delimiter);

    // Remove duplicate delimiters
    s = s.replace(RegExp('[' + opt.delimiter + ']{2,}', 'g'), opt.delimiter);

    // Truncate slug to max. characters
    s = s.substring(0, opt.limit);

    // Remove delimiter from ends
    s = s.replace(RegExp('(^' + opt.delimiter + '|' + opt.delimiter + '$)', 'g'), '');

    return opt.lowercase ? s.toLowerCase() : s;
}

1
Kuyruklu yıldızlarda birisi "Bu char_map nesnesindeki yinelemeler nedeniyle IE11 tarayıcılarında katı kullanım ile çalışmaz" dedi.
BBaysinger


3
function slugify(text){
  return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\u0100-\uFFFF\w\-]/g,'-') // Remove all non-word chars ( fix for UTF-8 chars )
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}

* https://gist.github.com/mathewbyrne/1280286 adresine göre

şimdi bu dizeyi dönüştürebilirsiniz:

Barack_Obama       Барак_Обама ~!@#$%^&*()+/-+?><:";'{}[]\|`

içine:

barack_obama-барак_обама

kodunuza başvurmak:

$("#Restaurant_Name").keyup(function(){
    var Text = $(this).val();
    Text = slugify(Text);
    $("#Restaurant_Slug").val(Text);
});

Bunun neden doğru cevap olarak seçilmediğinden emin değilim. Cevapların çoğu # veya? slug - URL'ler bu şekilde zarar görüyor. En çok kullanılan reaksiyon kütüphaneleri bile bu özelliğe sahip değildir. Bu cevap çok basit ama evrensel.
Vladimir Marton

3

Buradaki cevaplardan çeşitli unsurları normalleştirmeyle birleştirmek iyi bir kapsama alanı sağlar. URL'yi aşamalı olarak temizlemek için işlemlerin sırasını koruyun.

function clean_url(s) {
    return s.toString().normalize('NFD').replace(/[\u0300-\u036f]/g, "") //remove diacritics
            .toLowerCase()
            .replace(/\s+/g, '-') //spaces to dashes
            .replace(/&/g, '-and-') //ampersand to and
            .replace(/[^\w\-]+/g, '') //remove non-words
            .replace(/\-\-+/g, '-') //collapse multiple dashes
            .replace(/^-+/, '') //trim starting dash
            .replace(/-+$/, ''); //trim ending dash
}

normlize('NFD')aksanlı karakterleri temel harf artı aksan işaretleri (aksan kısmı) olan bileşenlerine ayırır. replace(/[\u0300-\u036f]/g, "")tüm harfleri temizler, temel harfleri kendileri bırakır. Geri kalanlar satır içi yorumlarla açıklanmıştır.


1
Teşekkürler. Bu basit ve test senaryolarımda iyi çalışıyor. Vietnamca karakter bile `` const testCases = [{input: 'bu iyi bir bilgi' ', bekliyoruz:' iyi bir bilgi '}, {input:' ----- - --it ----- a ----- iyi ----- slug ----- ', bekliyoruz:' iyi bir sümüklü böcek '}, {input:' CÔNG cha như núi Thái Sơn ', bekliyoruz:' cong-cha-nhu-nui-thai-son '}, {input:' -Haha - Nhất-Nguyễn ', bekliyoruz:' haha-nhat-nguyen '}] ``
Phat Tran Ky

1

Bunun için kendi işlevinizi kullanabilirsiniz.

deneyin: http://jsfiddle.net/xstLr7aj/

function string_to_slug(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim
  str = str.toLowerCase();

  // remove accents, swap ñ for n, etc
  var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
  var to   = "aaaaeeeeiiiioooouuuunc------";
  for (var i=0, l=from.length ; i<l ; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }

  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
    .replace(/\s+/g, '-') // collapse whitespace and replace by -
    .replace(/-+/g, '-'); // collapse dashes

  return str;
}
$(document).ready(function() {
    $('#test').submit(function(){
        var val = string_to_slug($('#t').val());
        alert(val);
        return false;
    });
});

Bu çözümde yukarıdaki yüksek oy alan cevaptan farkı nedir?
nilsi

Burada güncellenen kod, "-" ise son karakteri kaldırmak için jsfiddle.net/xstLr7aj/36
MGE

1

Kabul edilen cevap ihtiyaçlarımı karşılamadı (alt çizgilere izin veriyor, başlangıçta ve sonda tire kullanmıyor, vb.) Ve diğer cevapların kullanım durumuma uygun olmayan başka sorunları vardı, bu yüzden slugify işlevi Ben geldim:

function slugify(string) {
    return string.trim() // Remove surrounding whitespace.
    .toLowerCase() // Lowercase.
    .replace(/[^a-z0-9]+/g,'-') // Find everything that is not a lowercase letter or number, one or more times, globally, and replace it with a dash.
    .replace(/^-+/, '') // Remove all dashes from the beginning of the string.
    .replace(/-+$/, ''); // Remove all dashes from the end of the string.
}

Bu 'foo !!! BAR _-_-_ baz-' (başlangıçtaki boşluğa dikkat edin) 'e dönüşecektir foo-bar-baz.


1

TalkingURL eklentisine bir göz atmak isteyebilirsiniz ve sonra şunları yapabilirsiniz:

    $("#Restaurant_Name").on("keyup", function () {
        var slug = getSlug($("#Restaurant_Name").val());
        $("#Restaurant_Slug").val(slug);
    });

1

Yine bir tane daha. Kısa ve özel karakterler tutar:

imaginação é mato => imaginacao-e-mato

function slugify (text) {
  const a = 'àáäâãèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;'
  const b = 'aaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------'
  const p = new RegExp(a.split('').join('|'), 'g')

  return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(p, c =>
        b.charAt(a.indexOf(c)))     // Replace special chars
    .replace(/&/g, '-and-')         // Replace & with 'and'
    .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
}

1

Saf JavaScript'te daha güçlü bilgi oluşturma yöntemi. Temel olarak tüm Kiril karakterleri ve birçok Umlaut (Almanca, Danca, Fransa, Türkçe, Ukraynaca vb.) İçin harf çevirisini destekler, ancak kolayca genişletilebilir.

function makeSlug(str)
{
  var from="а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ā ą ä á à â å č ć ē ę ě é è ê æ ģ ğ ö ó ø ǿ ô ő ḿ ʼn ń ṕ ŕ ş ü ß ř ł đ þ ĥ ḧ ī ï í î ĵ ķ ł ņ ń ň ř š ś ť ů ú û ứ ù ü ű ū ý ÿ ž ź ż ç є ґ".split(' ');
  var to=  "a b v g d e e zh z i y k l m n o p r s t u f h ts ch sh shch # y # e yu ya a a ae a a a a c c e e e e e e e g g oe o o o o o m n n p r s ue ss r l d th h h i i i i j k l n n n r s s t u u u u u u u u y y z z z c ye g".split(' ');
	
  str = str.toLowerCase();
  
  // remove simple HTML tags
  str = str.replace(/(<[a-z0-9\-]{1,15}[\s]*>)/gi, '');
  str = str.replace(/(<\/[a-z0-9\-]{1,15}[\s]*>)/gi, '');
  str = str.replace(/(<[a-z0-9\-]{1,15}[\s]*\/>)/gi, '');
  
  str = str.replace(/^\s+|\s+$/gm,''); // trim spaces
  
  for(i=0; i<from.length; ++i)
    str = str.split(from[i]).join(to[i]);
  
  // Replace different kind of spaces with dashes
  var spaces = [/(&nbsp;|&#160;|&#32;)/gi, /(&mdash;|&ndash;|&#8209;)/gi,
     /[(_|=|\\|\,|\.|!)]+/gi, /\s/gi];

  for(i=0; i<from.length; ++i)
  	str = str.replace(spaces[i], '-');
  str = str.replace(/-{2,}/g, "-");

  // remove special chars like &amp;
  str = str.replace(/&[a-z]{2,7};/gi, '');
  str = str.replace(/&#[0-9]{1,6};/gi, '');
  str = str.replace(/&#x[0-9a-f]{1,6};/gi, '');
  
  str = str.replace(/[^a-z0-9\-]+/gmi, ""); // remove all other stuff
  str = str.replace(/^\-+|\-+$/gm,''); // trim edges
  
  return str;
};


document.getElementsByTagName('pre')[0].innerHTML = makeSlug(" <br/> &#x202A;Про&amp;вер<strong>ка_тран</strong>с…литеърьации\rюга\nи&ndash;южного&nbsp;округа\t \nс\tёжикам&#180;и&nbsp;со\\всеми&ndash;друзьями\tтоже.Danke schön!ich heiße=КáÞÿá-Skånske,København çağatay rí gé tőr zöldülésetekről - . ");
<div>
  <pre>Hello world!</pre>
</div>


1

Zaten kullanan kişiler için lodash

Bu örneklerin çoğu gerçekten iyi ve birçok vakayı içeriyor. Ama sadece İngilizce metniniz olduğunu biliyorsanız, işte benim okumam çok kolay olan sürümüm :)

_.words(_.toLower(text)).join('-')


1

Cevapları okuduktan sonra bunu buldum.

    const generateSlug = (text) => text.toLowerCase().trim().replace(/[^\w- ]+/g, '').replace(/ /g, '-').replace(/[-]+/g, '-');

1

Not: Kabul edilen cevaba karşı tartışmayı önemsemiyorsanız ve sadece bir cevap arıyorsanız, sonraki bölümü atlayın, sonunda önerilen cevabımı bulacaksınız

kabul edilen cevabın birkaç sorunu var (bence):

1) ilk fonksiyon snippet'ine gelince:

birbirini izleyen birden çok beyaz alana saygı yok

giriş: is it a good slug

Alınan: ---is---it---a---good---slug---

beklenen: is-it-a-good-slug

art arda birden çok tire işareti dikkate alınmaz

giriş: -----is-----it-----a-----good-----slug-----

Alınan: -----is-----it-----a-----good-----slug-----

beklenen: is-it-a-good-slug

Bu uygulamanın, birbirini izleyen birden çok karakter veya tekil karakterler (sümükleri anladığım kadarıyla) geçerli olmadığı için dış tire (veya boşluk boşlukları) işlemediğini lütfen unutmayın.

2) ikinci fonksiyon snippet'ine gelince:

birbirini izleyen beyaz boşlukları tek tek dönüştürerek halleder - ancak bu, dış (dizenin başında ve sonunda) beyaz boşlukların aynı şekilde ele alınması için yeterli değildir, bu yüzden is it a good sluggeri dönecektir-is-it-a-good-slug-

Ayrıca tireları girişten tamamen kaldırır. --is--it--a--good--slug--' .isitagoodslug ryan-alyan dış tire çözülmemiş karşın, yine de sorunu bırakarak o ilgilenir @ tarafından yorumunda, pasajı

şimdi sümüklü böcekler için standart bir tanım olmadığını biliyorum ve kabul edilen cevap işi alabilir (soruyu yayınlayan kullanıcının aradığını), ama bu JS'deki sümüklü böcekler hakkında en popüler SO sorusu, bu yüzden bu konular ( işin yapılmasına ilişkin! ) bir URL'nin bu iğrençliğini yazdığınızı hayal edin (www.blog.com/posts/-----how-----to-----slugify-----a-----string----- ) yazdığınızı veya hatta (www.blog.com/posts/how-to-slugify-a-string aşırı bir durum olduğunu biliyorum ama hey bu ne testler içindir.

bence daha iyi bir çözüm şöyle olurdu:

const slugify = str =>
  str
  .trim()                      // remove whitespaces at the start and end of string
  .toLowerCase()              
  .replace(/^-+/g, "")         // remove one or more dash at the start of the string
  .replace(/[^\w-]+/g, "-")    // convert any on-alphanumeric character to a dash
  .replace(/-+/g, "-")         // convert consecutive dashes to singuar one
  .replace(/-+$/g, "");        // remove one or more dash at the end of the string

şimdi muhtemelen bu tek satırlı bir ifadeye dönüştürebilirsiniz bir RegExp ninja var, ben RegExp bir uzman değilim ve bunun en iyi veya en kompakt çözüm veya en iyi performans olan biri olduğunu söylemiyorum ama umarım bu işi yapabilir.


Bu, alfasayısal olmayan karakterleri tirelere dönüştürmenin, satırın başında bir tireyi geri yükleyeceği bir kusura sahiptir. Ama lütfen bunu tek bir astar yapmayın. Bunu anlamak kolay!
Timo

1
$("#Restaurant_Name").keyup(function(){
        var Text = $(this).val();
        Text = Text.toLowerCase();
        Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
        $("#Restaurant_Slug").val(Text);        
});

Bu kod çalışıyor


Teşekkür ederim! Bunu kullanmak daha kolay.
Jane Doe

0
//
//  jQuery Slug Plugin by Perry Trinier (perrytrinier@gmail.com)
//  MIT License: http://www.opensource.org/licenses/mit-license.php

jQuery.fn.slug = function(options) {
var settings = {
    slug: 'slug', // Class used for slug destination input and span. The span is created on $(document).ready() 
    hide: true   // Boolean - By default the slug input field is hidden, set to false to show the input field and hide the span. 
};

if(options) {
    jQuery.extend(settings, options);
}

$this = $(this);

$(document).ready( function() {
    if (settings.hide) {
        $('input.' + settings.slug).after("<span class="+settings.slug+"></span>");
        $('input.' + settings.slug).hide();
    }
});

makeSlug = function() {
        var slug = jQuery.trim($this.val()) // Trimming recommended by Brooke Dukes - http://www.thewebsitetailor.com/2008/04/jquery-slug-plugin/comment-page-1/#comment-23
                    .replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase() // See http://www.djangosnippets.org/snippets/1488/ 
                    .replace(/\-{2,}/g,'-'); // If we end up with any 'multiple hyphens', replace with just one. Temporary bugfix for input 'this & that'=>'this--that'
        $('input.' + settings.slug).val(slug);
        $('span.' + settings.slug).text(slug);

    }

$(this).keyup(makeSlug);

return $this;
    };

Bu bana aynı problemde yardımcı oldu!


0
function slugify(content) {
   return content.toLowerCase().replace(/ /g,'-').replace(/[^\w-]+/g,'');
}
// slugify('Hello World');
// this will return 'hello-world';

bu benim için iyi çalışıyor.

Üzerinde buldum CodeSnipper


-5
private string ToSeoFriendly(string title, int maxLength) {
    var match = Regex.Match(title.ToLower(), "[\\w]+");
    StringBuilder result = new StringBuilder("");
    bool maxLengthHit = false;
    while (match.Success && !maxLengthHit) {
        if (result.Length + match.Value.Length <= maxLength) {
            result.Append(match.Value + "-");
        } else {
            maxLengthHit = true;
            // Handle a situation where there is only one word and it is greater than the max length.
            if (result.Length == 0) result.Append(match.Value.Substring(0, maxLength));
        }
        match = match.NextMatch();
    }
    // Remove trailing '-'
    if (result[result.Length - 1] == '-') result.Remove(result.Length - 1, 1);
    return result.ToString();
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.