JQuery के URL को शीर्षक में परिवर्तित करने के लिए कैसे?


163

मैं CodeIgniter में एक ऐप पर काम कर रहा हूं, और मैं गतिशील रूप से URL स्लग उत्पन्न करने के लिए एक फॉर्म बनाने की कोशिश कर रहा हूं। मैं जो करना चाहता हूं, वह विराम चिह्न को हटा देता है, इसे लोअरकेस में बदल देता है, और रिक्त स्थान को हाइफ़न के साथ बदल देता है। इसलिए, उदाहरण के लिए, शेन की रिब शेक शेंस-रिब-शेक बन जाएगी।

यहाँ मेरे पास अभी तक क्या है। लोअरकेस हिस्सा आसान था, लेकिन प्रतिस्थापित बिल्कुल काम नहीं करता है, और मुझे विराम चिह्न हटाने का कोई विचार नहीं है:

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

2
JQuery नहीं, लेकिन लाइब्रेरियों के 'स्पीकुरल' या 'नोड-स्लग' पर गौर करें
केविन व्हीलर

जवाबों:


379

मुझे नहीं पता कि 'स्लग' शब्द कहां से आया है, लेकिन यहां हम जाते हैं:

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

पहले प्रतिस्थापित स्थानों को हाइफ़न में बदल देगा, दूसरा प्रतिस्थापित अल्फ़ान्यूमेरिक, अंडरस्कोर या हाइफ़न को कुछ भी नहीं हटाता है।

अगर आप चीजों को "पसंद नहीं करते हैं" - यह "जैसे ---" में बदल जाता है, तो आप इसके बजाय इस का उपयोग कर सकते हैं:

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

यह पहली जगह पर हाइफ़न (लेकिन रिक्त स्थान नहीं) को हटा देगा, और दूसरे की जगह यह एक एकल हाइफ़न में लगातार रिक्त स्थान घनीभूत करेगा।

तो "जैसे - यह" "जैसे-इस" के रूप में सामने आता है।


1
यदि आपको मल्टी डाइरेक्ट्री की जरूरत नहीं है तो "/" को जोड़ने के लिए मत भूलना
Val

6
शब्द "स्लग" वर्डप्रेस से आया
ब्रायनर फरेरा

18
कई अनुक्रमिक हाइफ़न से बचने के लिए, मैंने text.toLowerCase().replace(/ /g,'-').replace(/[-]+/g, '-').replace(/[^\w-]+/g,'');विकल्प 2 के बजाय उपयोग किया । विकल्प 2 "वें" को "इस" में बदल देगा।
रयान एलन

मैं URL में डॉट की अनुमति भी कैसे दूं?
ईडन शेखर

स्लग में "_" से बचने के लिए, ओवरराइड .replace (/ + / g, '-') से .re (/ (+ + | _ / g, '-))।
ओडिन थंडर

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;
};

और कोशिश

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

मूल द्वारा: http://dense13.com/blog/2009/05/03/converting-string-to-slug-javascript/


संपादित करें: अधिक भाषा विशिष्ट वर्णों के लिए विस्तारित:

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

6
लेकिन सही ढंग से नहीं। जर्मन ग्रंथों में, आदि के üसाथ प्रतिस्थापित किया जाना चाहिएue
फेकली

5
@feklee: "सही ढंग से नहीं" जर्मन (और संभवतः कुछ अन्य भाषाओं) के लिए सच है, लेकिन अन्य भाषाओं में यह ठीक है। एक अंग्रेजी वेबसाइट के लिए, मैं चाहता हूं कि "मेरोफ्लोदी" (हंगेरियन मूल का अंतिम नाम) को "मार्फोल्डी" में बदल दिया जाए, न कि जर्मन के रूप में "मारफेल्डी"।
मिकालस्टैंको

1
क्रॉस-प्लेटफ़ॉर्म संगतता सुनिश्चित करने के लिए, आप = "\ u00E3 \ u00E0 \ u00E1 \ u00E4 \ u00E2 \ u1EBD \ u00E8 \ u00E8 \ u00EB \ u00EB \ u00EC \ u00E \ u00EF \ u00EE \ u00EE \ u00EE \" से अधिक समय से कम कर सकते हैं। u00F6 \ u00F4 \ u00F9 \ u00FA \ u00FC \ u00FB \ u00F1 \ u00E7 \ U00B7 / _,: ";
माइक गोडिन

1
अच्छा समाधान! åहालांकि स्कैंडिनेवियाई याद आ रही है ।
फ्रेड्रिक

1
आप जोड़ सकते हैं İĞŞığşकरने के लिए fromचर और कन्वर्ट करने के लिए उन्हें IGSigsतुर्की वर्णों का समर्थन करते है।
CemilF

19

सबसे पहले, नियमित अभिव्यक्ति उद्धरण आसपास नहीं करना चाहिए था, इसलिए '/ \ s / जी' होना चाहिए / \ रों / जी

सभी गैर-अल्फ़ान्यूमेरिकल वर्णों को डैश के साथ बदलने के लिए, यह काम करना चाहिए (आपके उदाहरण कोड का उपयोग करके):

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

यह ट्रिक काम आना चाहिए...


8

मुझे अंग्रेजी के लिए एक अच्छा और पूर्ण समाधान मिला

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

उपयोग में इसके कुछ उदाहरण:

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"

एंड्रयू स्टीवर्ट को धन्यवाद


8

उम्मीद है कि यह किसी का दिन बचा सकता है ...

/* 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

आप सभी की जरूरत थी एक प्लस :)

$("#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 पर शॉन मर्फी द्वारा विकसित URL को पवित्र करने के लिए इस स्लग फ़ंक्शन पर एक नज़र डालें

/**
 * 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
धूमकेतु में किसी ने कहा "यह char_map ऑब्जेक्ट में डुप्लिकेट के कारण IE11- ब्राउज़र में सख्त उपयोग के साथ काम नहीं करेगा।"
बीबीसिंगर


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 पर आधारित

अब आप इस स्ट्रिंग को बदल सकते हैं:

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

में:

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

अपने कोड के लिए आवेदन:

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

निश्चित नहीं है कि इसे सही उत्तर के रूप में क्यों नहीं चुना गया है। उत्तर में से कई # या हटाने पर भरोसा नहीं करते? स्लग से - URL का इस तरह से क्षतिग्रस्त हो जाना। यहां तक ​​कि शीर्ष-प्रयुक्त प्रतिक्रिया पुस्तकालयों में यह सुविधा लागू नहीं है। यह उत्तर बहुत सरल है, फिर भी सार्वभौमिक है।
व्लादिमीर मार्टन

3

सामान्यीकरण के साथ यहां विभिन्न प्रकार के तत्वों के संयोजन से अच्छी कवरेज मिलती है। वर्धित रूप से url को साफ़ करने के लिए संचालन का क्रम बनाए रखें।

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')उनके घटकों में उच्चारण वर्णों को तोड़ता है, जो कि मूल अक्षर प्लस डायक्टिकिक्स (उच्चारण भाग) हैं। replace(/[\u0300-\u036f]/g, "")सभी पत्र-पत्रिकाओं को शुद्ध करता है, मूल पत्रों को स्वयं छोड़ देता है। बाकी इनलाइन टिप्पणियों के साथ समझाया गया है।


1
धन्यवाद। यह सरल है और मेरे परीक्षण-मामलों के साथ अच्छी तरह से काम करता है। यहां तक ​​कि वियतनामी चरित्र `` कास्ट टेस्टकेस = [{इनपुट: 'यह एक अच्छा स्लग है', उम्मीद: 'यह एक अच्छा-स्लग' है}, {इनपुट: '----- है --- - यह ----- एक ----- अच्छा ----- स्लग ----- ', उम्मीद:' यह-ए-ए-अच्छा-स्लग '}, {इनपुट:' CÔNG चा như नुई थई सून, उम्मीद: 'cong-cha-nhu-nui-थाई-बेटा'}, {इनपुट: '-हा -हाग-न्ग्टुएन', उम्मीद: 'हाहा-नात-नौगीन'}] `` `
फाट ट्रान क्यू

1

आप इसके लिए अपने स्वयं के फ़ंक्शन का उपयोग कर सकते हैं।

इसे आज़माएं: 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;
    });
});

ऊपर दिए गए अत्यधिक मत वाले उत्तर से इस समाधान में क्या अंतर है?
nilsi

कोड यहाँ अद्यतन किया गया है, यदि अंतिम वर्ण को हटा दिया जाए तो "-" jsfiddle.net/xstLr7aj/36
MGE

1

स्वीकृत उत्तर मेरी जरूरतों को पूरा नहीं करता है (यह अंडरस्कोर की अनुमति देता है, शुरुआत और अंत में डैश को संभालता नहीं है, आदि), और अन्य उत्तरों में अन्य मुद्दे थे जो मेरे उपयोग के मामले के अनुरूप नहीं थे, इसलिए यहां एक सुस्त कार्य है मेरे द्वारा लाया गया:

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.
}

यह 'foo !!! BAR _-_-_ baz-' (शुरुआत में स्थान को नोट करेगा) में बदल जाएगा foo-bar-baz



1

फिर भी एक और। लघु और विशेष वर्ण रखता है:

इमेजिनाकाओ मोटो => कल्पनाचीनो-ए-माटो

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

शुद्ध जावास्क्रिप्ट पर अधिक शक्तिशाली स्लग पीढ़ी विधि। यह मूल रूप से सभी सिरिलिक पात्रों और कई उमलाट्स (जर्मन, डेनिश, फ्रांस, तुर्की, यूक्रेनी और आदि) के लिए लिप्यंतरण का समर्थन करता है, लेकिन आसानी से बढ़ाया जा सकता है।

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

पहले से ही उपयोग कर रहे लोगों के लिए lodash

इनमें से अधिकांश उदाहरण वास्तव में अच्छे हैं और बहुत सारे मामलों को कवर करते हैं। लेकिन अगर आप जानते हैं कि आपके पास केवल अंग्रेजी पाठ है, तो यहां मेरा संस्करण है जो पढ़ने में आसान है :)

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


1

खैर, जवाब पढ़ने के बाद, मैं इस एक के साथ आया।

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

1

नोट: यदि आप स्वीकृत उत्तर के विरूद्ध तर्क की परवाह नहीं करते हैं और केवल उत्तर की तलाश में हैं, तो अगले भाग को छोड़ें, आपको मेरा प्रस्तावित उत्तर अंत में मिलेगा

स्वीकृत उत्तर में कुछ मुद्दे हैं (मेरी राय में):

1) पहले समारोह स्निपेट के लिए:

कई लगातार व्हाट्सएप के लिए कोई संबंध नहीं

इनपुट: is it a good slug

प्राप्त किया: ---is---it---a---good---slug---

अपेक्षित होना: is-it-a-good-slug

कई लगातार डैश के लिए कोई संबंध नहीं है

इनपुट: -----is-----it-----a-----good-----slug-----

प्राप्त किया: -----is-----it-----a-----good-----slug-----

अपेक्षित होना: is-it-a-good-slug

कृपया ध्यान दें कि यह कार्यान्वयन बाहरी डैश (या उस मामले के लिए व्हाट्सएप) को संभालता नहीं है, चाहे वे कई लगातार हों या एकवचन वर्ण हों (जहां तक ​​मैं स्लग समझता हूं, और उनका उपयोग) मान्य नहीं है

2) दूसरे समारोह स्निपेट के लिए:

यह एकल को परिवर्तित करके कई लगातार व्हाट्सएप का ख्याल रखता है, -लेकिन यह बाहरी के रूप में पर्याप्त नहीं है (स्ट्रिंग के शुरू और अंत में) व्हाट्सएप को एक ही तरह से संभाला जाता है, इसलिए is it a good slugवापस आ जाएगा-is-it-a-good-slug-

यह इनपुट से पूरी तरह से डैश को हटा देता है, जो कुछ इस तरह --is--it--a--good--slug--'से कनवर्ट करता है isitagoodslug, @ ryan-एलन द्वारा टिप्पणी में स्निपेट, इस बात का ध्यान रखता है कि बाहरी डैश मुद्दे को अनसुलझा छोड़ दें

अब मुझे पता है कि स्लग के लिए कोई मानक परिभाषा नहीं है, और स्वीकार किए गए उत्तर को काम मिल सकता है (जिस उपयोगकर्ता ने सवाल पोस्ट किया था) उसे ढूंढ रहा है, लेकिन जेएस में स्लग के बारे में यह सबसे लोकप्रिय एसओ प्रश्न है, इसलिए उन मुद्दों यह भी बताया जाना चाहिए, यह भी ( काम पूरा होने के संबंध में ! ) एक यूआरएल ( www.blog.com/posts/-----how-----to-----slugify-----a-----string-----) के इस घृणित टाइपिंग की कल्पना करो या यहां तक ​​कि जैसे कुछ ( www.blog.com/posts/how-to-slugify-a-string) के बजाय इसे पुनर्निर्देशित किया जाना चाहिए , मुझे पता है कि यह एक चरम मामला है लेकिन हे कि क्या परीक्षण है इसलिए है।

एक बेहतर समाधान , मेरी राय में, इस प्रकार होगा:

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

अब शायद वहाँ एक RegExp निनजा है जो इसे एक-लाइनर अभिव्यक्ति में बदल सकता है, मैं RegExp का विशेषज्ञ नहीं हूं और मैं यह नहीं कह रहा हूं कि यह सबसे अच्छा या सबसे कॉम्पैक्ट समाधान है या सबसे अच्छा प्रदर्शन वाला लेकिन उम्मीद है कि यह काम पूरा कर सकता है।


इसका एक दोष है जहां गैर-अल्फ़ान्यूमेरिक वर्णों को डैश में परिवर्तित करना संभवतः लाइन की शुरुआत में डैश को पुनर्स्थापित करेगा। लेकिन कृपया इसे एक लाइनर न बनाएं। यह समझना आसान है!
तिमो

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

यह कोड काम कर रहा है


धन्यवाद! यह उपयोग करने के लिए आसान है।
जेन डो

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;
    };

इससे मुझे उसी समस्या में मदद मिली!


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

यह मेरे लिए ठीक काम करता है।

यह 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();
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.