Làm cách nào để chuyển đổi một Tiêu đề thành một con sên URL trong jQuery?


163

Tôi đang làm việc trên một ứng dụng trong CodeIgniter và tôi đang cố gắng tạo một trường trên một biểu mẫu tự động tạo ra sên URL. Những gì tôi muốn làm là loại bỏ dấu câu, chuyển đổi nó thành chữ thường và thay thế khoảng trắng bằng dấu gạch nối. Vì vậy, ví dụ, Shane's Rib Shack sẽ trở thành shanes-rib-shack.

Đây là những gì tôi có cho đến nay. Phần chữ thường rất dễ, nhưng phần thay thế dường như không hoạt động, và tôi không có ý tưởng nào để xóa dấu câu:

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

2
Không phải jQuery, nhưng hãy nhìn vào các thư viện 'speakurl' hoặc 'nút-slug'
Kevin Wheeler

... hoặc slugify
x-yuri

Câu trả lời:


379

Tôi không biết thuật ngữ 'sên' đến từ đâu, nhưng ở đây chúng tôi đi:

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

Thay thế đầu tiên sẽ thay đổi không gian thành dấu gạch nối, thay thế thứ hai loại bỏ bất cứ thứ gì không phải là chữ và số, gạch dưới hoặc gạch nối.

Nếu bạn không muốn những thứ "như - này" biến thành "như --- này" thì thay vào đó bạn có thể sử dụng thứ này:

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

Điều đó sẽ loại bỏ các dấu gạch nối (nhưng không phải dấu cách) ở lần thay thế đầu tiên và trong lần thay thế thứ hai, nó sẽ ngưng tụ các khoảng trắng liên tiếp thành một dấu gạch nối đơn.

Vì vậy, "like - this" xuất hiện dưới dạng "like-this".


1
đừng quên thêm "/" nếu bạn cần nhiều thư mục tách biệt
Val

6
thuật ngữ "sên" xuất phát từ wordpress
Brynner Ferreira

18
Để tránh nhiều dấu gạch nối tiếp, tôi đã sử dụng text.toLowerCase().replace(/ /g,'-').replace(/[-]+/g, '-').replace(/[^\w-]+/g,'');thay vì tùy chọn 2. Tùy chọn 2 sẽ thay đổi "th - is" thành "this".
Ryan Allen

Làm cách nào để tôi cũng cho phép dấu chấm trong URL?
Shechter Idan

Để tránh "_" trong sên, ghi đè .replace (/ + / g, '-') thành .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;
};

và cố gắng

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

bản gốc: http://dense13.com/blog/2009/05/03/converting-opes-to-slug-javascript/


EDIT: mở rộng cho các ký tự cụ thể hơn về ngôn ngữ:

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

6
Nhưng không chính xác. Trong các văn bản tiếng Đức, ünên được thay thế bằng ue, v.v.
feklee

5
@feklee: "Không chính xác" là đúng với tiếng Đức (và có thể một số ngôn ngữ khác), nhưng trong các ngôn ngữ khác, nó chỉ tốt. Đối với một trang web tiếng Anh, tôi muốn "Márföldi" (tên cuối cùng của một nguồn gốc Hungary) được chuyển đổi thành "marprinti", chứ không phải "marfoeldi", như người Đức.
michalstanko

1
Để đảm bảo khả năng tương thích đa nền tảng, bạn có thể muốn đăng ký từ = "\ u00E3 \ u00E0 \ u00E1 \ u00E4 \ u00E2 \ u1EBD \ u00E8 \ u00E9 \ u00EB \ u00EA \ u00EC \ u00E00 u00F6 \ u00F4 \ u00F9 \ u00FA \ u00FC \ u00FB \ u00F1 \ u00E7 \ u00B7 / _,:; ";
Mike Godin

1
Giải pháp tốt đẹp! Thiếu người Scandinavi åmặc dù.
Fredric

1
Bạn có thể thêm İĞŞığşvào frombiến và chuyển đổi chúng IGSigsđể hỗ trợ các ký tự Thổ Nhĩ Kỳ.
CemilF

19

Trước hết, các biểu thức chính quy không nên có các trích dẫn xung quanh, vì vậy '/ \ s / g' phải là / \ s / g

Để thay thế tất cả các ký tự không chữ và số bằng dấu gạch ngang, điều này sẽ hoạt động (sử dụng mã ví dụ của bạn):

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

Điều đó sẽ làm các trick...


8

Tôi tìm thấy một giải pháp tốt và đầy đủ cho tiếng Anh

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

Một số ví dụ về nó được sử dụng:

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"

Cảm ơn Andrew Stewart


8

Hy vọng điều này có thể cứu ngày của ai đó ...

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

Tất cả bạn cần là một cộng :)

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

6

Hãy xem chức năng sên này để vệ sinh URL, được phát triển bởi Sean Murphy tại https://gist.github.com/sgmurphy/3095196

/**
 * 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
Trong các commets, ai đó đã nói "Điều này sẽ không hoạt động với việc sử dụng nghiêm ngặt trong các trình duyệt IE11- vì các bản sao trong đối tượng char_map."
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
}

*dựa trên https://gist.github.com/mathewbyrne/1280286

bây giờ bạn có thể chuyển đổi chuỗi này:

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

vào:

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

áp dụng cho mã của bạn:

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

Không chắc chắn tại sao điều này không được chọn là câu trả lời chính xác. Nhiều câu trả lời không được tính vào việc loại bỏ # hoặc? từ con sên - URL bị hỏng theo cách này. Ngay cả các thư viện phản ứng được sử dụng hàng đầu cũng không có tính năng này được triển khai. Câu trả lời này rất đơn giản, nhưng phổ quát.
Vladimir Marton

3

Kết hợp nhiều yếu tố từ các câu trả lời ở đây với chuẩn hóa sẽ cung cấp độ bao phủ tốt. Giữ thứ tự các hoạt động để tăng dần 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')ngắt các ký tự có dấu thành các thành phần của chúng, đó là các chữ cái cơ bản cộng với dấu phụ (phần dấu). replace(/[\u0300-\u036f]/g, "")thanh trừng tất cả các dấu phụ, để lại các chữ cái cơ bản. Phần còn lại được giải thích với ý kiến ​​nội tuyến.


1
Cảm ơn bạn. Điều này là đơn giản và hoạt động tốt với các trường hợp thử nghiệm của tôi. Ngay cả ký tự tiếng Việt `` `const testCase = [{input: 'nó có phải là một con sên tốt không', mong đợi: 'is-it-a-good-slug'}, {input: '----- is --- --it ----- a ----- tốt ----- sên ----- ', mong đợi:' is-it-a-good-slug '}, {input:' tiền cha như Núi Thái Sơn ', mong đợi:' cong-cha-nhu-nui-thai-son '}, {input:' -Haha - Nhất-Nguyễn ', mong đợi:' haha-nhat-nguyen '}] `` `
Phát Trần Kỳ

1

Bạn có thể sử dụng chức năng của riêng bạn cho việc này.

hãy thử: 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;
    });
});

Sự khác biệt trong giải pháp này từ câu trả lời được bình chọn cao ở trên là gì?
nilsi

mã được cập nhật tại đây, để xóa ký tự cuối cùng nếu là "-" jsfiddle.net/xstLr7aj/36
MGE

1

Câu trả lời được chấp nhận không đáp ứng nhu cầu của tôi (nó cho phép gạch dưới, không xử lý dấu gạch ngang ở đầu và cuối, v.v.) và các câu trả lời khác có các vấn đề khác không phù hợp với trường hợp sử dụng của tôi, vì vậy đây là chức năng slugify Tôi đến với:

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

Điều này sẽ biến 'foo !!! BAR _-_-_ baz-' (lưu ý khoảng trắng ở đầu) thành foo-bar-baz.


1

Bạn có thể muốn xem qua plugin speakURL và sau đó bạn chỉ có thể:

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

1

Còn một cái nữa. Ngắn và giữ các ký tự đặc biệt:

fantinação é mato => fantinacao-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

Phương pháp tạo sên mạnh hơn trên JavaScript thuần. Về cơ bản, nó hỗ trợ phiên âm cho tất cả các ký tự Cyrillic và nhiều Umlauts (tiếng Đức, tiếng Đan Mạch, tiếng Pháp, tiếng Thổ Nhĩ Kỳ, tiếng Ukraina và vv) nhưng có thể dễ dàng mở rộng.

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

Đối với những người đã sử dụng lodash

Hầu hết các ví dụ này là thực sự tốt và bao gồm rất nhiều trường hợp. Nhưng nếu bạn 'biết' rằng bạn chỉ có văn bản tiếng Anh, thì đây là phiên bản của tôi rất dễ đọc :)

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


1

Vâng, sau khi đọc câu trả lời, tôi đã đưa ra cái này.

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

1

Lưu ý: nếu bạn không quan tâm đến một đối số chống lại câu trả lời được chấp nhận và chỉ tìm kiếm một câu trả lời, thì hãy bỏ qua phần tiếp theo, bạn sẽ tìm thấy câu trả lời được đề xuất của tôi ở cuối

câu trả lời được chấp nhận có một vài vấn đề (theo ý kiến ​​của tôi):

1) như đối với đoạn chức năng đầu tiên:

không liên quan đến nhiều khoảng trắng liên tiếp

đầu vào: is it a good slug

nhận: ---is---it---a---good---slug---

hy vọng: is-it-a-good-slug

không liên quan đến nhiều dấu gạch ngang liên tiếp

đầu vào: -----is-----it-----a-----good-----slug-----

nhận: -----is-----it-----a-----good-----slug-----

hy vọng: is-it-a-good-slug

xin lưu ý rằng việc triển khai này không xử lý các dấu gạch ngang bên ngoài (hoặc khoảng trắng cho vấn đề đó) cho dù chúng là nhiều ký tự liên tiếp hoặc ký tự số ít (theo như tôi hiểu về sên và cách sử dụng của chúng) không hợp lệ

2) như đối với đoạn chức năng thứ hai:

nó chăm sóc nhiều khoảng trắng liên tiếp bằng cách chuyển đổi chúng thành một -nhưng không đủ vì các khoảng trắng bên ngoài (ở đầu và cuối chuỗi) các khoảng trắng được xử lý như nhau, vì vậy is it a good slugsẽ trả về-is-it-a-good-slug-

nó cũng loại bỏ dấu gạch ngang hoàn toàn từ đầu vào mà chuyển đổi một cái gì đó như --is--it--a--good--slug--'đểisitagoodslug , đoạn trong các bình luận của @ ryan-allen chăm sóc đó, bỏ dấu gạch ngang ngoài hành mặc dù chưa được giải quyết

bây giờ tôi biết rằng không có định nghĩa chuẩn cho sên và câu trả lời được chấp nhận có thể giúp công việc (mà người dùng đã đăng câu hỏi đang tìm kiếm) được thực hiện, nhưng đây là câu hỏi SO phổ biến nhất về sên trong JS, vì vậy những vấn đề đó cũng phải được chỉ ra (liên quan đến việc hoàn thành công việc! ) hãy tưởng tượng việc gõ URL gớm ghiếc này ( www.blog.com/posts/-----how-----to-----slugify-----a-----string-----) hoặc thậm chí chỉ được chuyển hướng đến nó thay vì một cái gì đó như (www.blog.com/posts/how-to-slugify-a-string ), tôi biết đây là một trường hợp cực đoan nhưng đó là những gì kiểm tra là cho.

theo tôi, một giải pháp tốt hơn sẽ như sau:

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

bây giờ có lẽ có một ninja RegExp có thể chuyển đổi biểu thức này thành biểu thức một lớp, tôi không phải là chuyên gia về RegExp và tôi không nói rằng đây là giải pháp tốt nhất hoặc nhỏ gọn nhất hoặc là giải pháp tốt nhất nhưng hy vọng nó có thể hoàn thành công việc


Điều này có một lỗ hổng trong đó việc chuyển đổi các ký tự không chữ và số thành dấu gạch ngang sẽ có thể khôi phục dấu gạch ngang ở đầu dòng. Nhưng làm ơn đừng biến nó thành một lớp lót. Điều này là dễ hiểu!
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);        
});

Mã này đang hoạt động


Cảm ơn bạn! Điều này dễ sử dụng hơn.
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;
    };

Điều này đã giúp tôi với cùng một vấn đề!


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

cái này tốt cho tôi

Tìm thấy nó trên 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();
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.