jQuery에서 제목을 URL 슬러그로 변환하는 방법은 무엇입니까?


163

CodeIgniter에서 앱을 작성 중이며 양식의 필드를 동적으로 생성하여 URL 슬러그를 생성하려고합니다. 내가하고 싶은 것은 문장 부호를 제거하고 소문자로 변환 한 다음 공백을 하이픈으로 바꾸는 것입니다. 예를 들어 Shane의 Rib Shack은 shanes-rib-shack이됩니다.

여기까지 내가 가진 것입니다. 소문자는 쉽지만 대체 기능이 전혀 작동하지 않는 것 같습니다. 구두점을 제거 할 생각이 없습니다.

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

2
jQuery는 아니지만 'speakingurl'또는 'node-slug'라이브러리를 살펴보십시오.
Kevin Wheeler

... 또는 slugify
x-yuri

답변:


379

나는 '슬러그'용어가 어디에서 왔는지 전혀 알지 못하지만 여기서 간다.

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

첫 번째 바꾸기는 공백을 하이픈으로 바꾸고 두 번째 바꾸기는 영숫자, 밑줄 또는 하이픈이 아닌 것을 제거합니다.

"like-this"를 "like --- this"로 바꾸지 않으려면 대신 다음을 사용하십시오.

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

첫 번째 대치에서 하이픈 (공백은 아님)을 제거하고 두 번째 대치에서는 연속 된 공백을 단일 하이픈으로 압축합니다.

따라서 "like-this"는 "like-this"로 나타납니다.


1
다중 디렉토리를 분리해야하는 경우에도 "/"를 추가하는 것을 잊지 마십시오
Val

6
용어 "슬러그는"워드 프레스에서 온
Brynner 페레이라에게

18
여러 개의 순차적 하이픈을 피하기 위해 text.toLowerCase().replace(/ /g,'-').replace(/[-]+/g, '-').replace(/[^\w-]+/g,'');옵션 2 대신 사용 했습니다. 옵션 2는 "th--is"를 "this"로 변경합니다.
Ryan Allen

URL에 점을 허용하려면 어떻게합니까?
Idan Shechter

슬러그에서 "_"를 피하려면 .replace (/ + / g, '-')를 .replace (/ + | _ / g, '-')로 대체하십시오.
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;
};

시도

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

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


편집 : 더 많은 언어 별 문자로 확장 :

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

6
그러나 정확하게는 아닙니다. 독일어 텍스트에서 등 ü으로 대체되어야합니다 ue.
feklee

5
@feklee : "정확하지 않다"는 독일어 (및 다른 언어)에게는 사실이지만 다른 언어에서는 괜찮습니다. 영어 웹 사이트의 경우, "Márföldi"(헝가리어의 성)를 독일인처럼 "marfoeldi"가 아닌 "marfoldi"로 변환하고 싶습니다.
michalstanko

1
플랫폼 간 호환성을 보장하기 위해 = "\ u00E3 \ u00E0 \ u00E1 \ u00E4 \ u00E2 \ u1EBD \ u00E8 \ u00E9 \ u00EB \ u00EA \ u00EC \ u00ED \ u00EF \ u00EE \ u00F00 \ u00F2 \ u00F5 \ u00F2 \ u00F6 \ u00F4 \ u00F9 \ u00FA \ u00FC \ u00FB \ u00F1 \ u00E7 \ u00B7 / _, :; ";
Mike Godin

1
좋은 해결책! 스칸디나비아가 누락되었습니다 å.
Fredric

1
변수에 추가 İĞŞığş하고 터키 문자를 지원 from하도록 변환 할 수 있습니다 IGSigs.
CemilF

19

우선, 정규 표현식에는 따옴표가 없어야하므로 '/ \ s / g'/ \ s / g 여야합니다.

영숫자가 아닌 모든 문자를 대시로 바꾸려면 예제 코드를 사용하여 작동합니다.

$("#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"

Andrew Stewart 에게 감사합니다


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 에서 Sean Murphy가 개발 한 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- 브라우저에서 엄격하게 사용할 수 없습니다."라고 말했습니다.
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

이제이 문자열을 변환 할 수 있습니다 :

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

으로:

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

코드에 적용 :

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

왜 이것이 정답으로 선택되지 않았는지 잘 모르겠습니다. 많은 답변은 # 또는?를 제거하지 않습니다. 슬러그에서-URL이 이런 식으로 손상됩니다. 가장 많이 사용되는 반응 라이브러리조차도이 기능이 구현되지 않았습니다. 이 대답은 매우 간단하지만 보편적입니다.
Vladimir Marton 2016 년

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
감사합니다. 이것은 간단하며 테스트 사례와 잘 작동합니다. 베트남 문자```const testCases = [{input : '좋은 슬러그입니까?', 예상 : 'is-it-a-good-slug'}, {input : '----- is --- --it ----- a ----- good ----- slug ----- ','is-it-a-good-slug '}, {input :'CÔNG cha như núi Thái Sơn ':'cong-cha-nhu-nui-thai-son '}, {입력 :'-Haha--Nhất-Nguyễn ', 예상 :'haha-nhat-nguyen '}]```
Phat Tran Ky

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

허용 된 답변이 내 요구를 충족시키지 못했습니다 (밑줄을 허용하고 시작과 끝에서 대시를 처리하지 않는 등). 다른 답변에는 사용 사례에 맞지 않는 다른 문제가 있었으므로 여기에 slugify 함수가 있습니다. 나는 생각해 냈다 :

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

speakingURL 플러그인을 살펴보고 싶을 수도 있습니다.

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

1

또 하나. 특수 문자를 짧게 유지합니다.

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

순수한 JavaScript에서보다 강력한 슬러그 생성 방법. 기본적으로 모든 키릴 문자 및 많은 Umlauts (독일어, 덴마크어, 프랑스, ​​터키어, 우크라이나어 등)의 음역을 지원하지만 쉽게 확장 할 수 있습니다.

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 라이언 앨런은 외부 대시가 해결되지 않은 생각을 발행 떠나, 그 처리합니다 @으로 주석에, 스 니펫을

이제 슬러그에 대한 표준 정의가 없으며 승인 된 답변이 작업 (질문을 게시 한 사용자가 찾고 있던)을 수행 할 수 있지만 JS의 슬러그에 대한 가장 인기있는 SO 질문이므로 해당 문제 ( 작업을 완료하는 것과 관련하여) 지적해야했습니다 ( URL 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의 전문가가 아니며 이것이 최고의 또는 가장 컴팩트 한 솔루션이거나 최고의 성능을 가진 솔루션이라고 말하는 것이 아닙니다 그러나 잘하면 그것은 일을 끝낼 수 있습니다.


영숫자가 아닌 문자를 대시로 변환하면 줄의 시작 부분에 대시가 복원 될 수있는 결함이 있습니다. 그러나 하나의 라이너로 만들지 마십시오. 이것은 이해하기 쉽다!
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);        
});

이 코드는 작동합니다


감사합니다! 사용하기가 더 쉽습니다.
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;
    };

이것은 같은 문제를 해결하는 데 도움이되었습니다!


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();
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.