Упростить рабочую функцию для замены определенных слов?

Question

У меня есть функция, чтобы сократить некоторые слова, когда этикетка обертывается (чтобы приспособиться к различным разрешениям). Моя функция работает, но я думаю, что ее можно упростить ... просто я не знаю, как это сделать. Поскольку я добавляю больше слов здесь, повторение может быстро выйти из-под контроля. Могу ли я поместить длинные слова/короткие слова в массив и передать все сразу или что-то еще? Я не мог заставить скрипку работать (хотя она работает над моим проектом), но здесь вы идете. http://jsfiddle.net/wucd1mws/1/ Спасибо заранее!

if ($('label').height() > 20) { 
    alert('Text wrapped'); 

    var numtext = $('label:contains("Number")') 
    if (numtext) { 
     numtext.each(function() { 
      $(this).html($(this).text().replace('Number', '#')); 
     }); 
    } 

    var pertext = $('label:contains("Percent")') 
    if (pertext) { 
     pertext.each(function() { 
      $(this).html($(this).text().replace('Percent', '%')); 
     }); 
    } 

    var invtext = $('label:contains("Invoice")') 
    if (invtext) { 
     invtext.each(function() { 
      $(this).html($(this).text().replace('Invoice', 'Inv')); 
     }); 
    } 

    // etc... 
} 

Я думал, что это, скорее всего, первый шаг, чтобы сократить функцию ... теперь кормить в длинных/коротких пар слов.

if ($('label').height() > 32) { 
    var long = "Number"; 
    var short = "#"; 

    var labelwrap = $('label:contains('+ long +')') 
    if (labelwrap) { 
     labelwrap.each(function() { 
      $(this).html($(this).text().replace(long, short)); 
     }); 
    } 
} 

Answer 1

Это намного более оптимально w ау в любых средствах:

var short_trans = { 
    'Percent': '%', 
    'Number': '#', 
    'Invoice': 'Inv', 
    'Amount': 'Amt', 
    'Shipping': 'Ship', 
    'Production': 'Prod', 
    'Allocated': 'Alloc', 
    'Complete': 'Comp', 
    'Manager': 'Mgr' 
} 

$('label').each(function(){ 
    if ($(this).height() > 20) 
    { 
     var words = $(this).text().split(' '); 
     for (var i in words) 
     { 
      if (short_trans[words[i]]) 
      { 
       words[i] = short_trans[words[i]]; 
      } 
     } 

     $(this).text(words.join(' ')); 
    } 
});  

Мы когда-то петля для любого label тега, проверьте height > 20, затем split текст в слове цикла каждое слово и проверить, если укоротить версию существует, если так замените его

http://jsfiddle.net/wucd1mws/2/

Answer 2

//objects can be used for hash lookups in javascript 
var replaceValues = { 
    'percent': '%', 
    'number': '#' 
    //etc. 
} 

var html = $('label').html(); //get the html of your element 
for (var index in replaceValues) { 
    if (html.indexOf(index) != -1) { //check if substring is present 
     html.replace(index, replaceValues[index]); //if so replace with alt value 
    } 
} 

Поместите это в вашей первоначальной условной проверки.

EDIT: у старых браузеров нет String.prototype.indexOf, и процесс замены, как я писал, чувствителен к регистру.

Answer 3

Вот код:

<script type="text/javascript"> 
$(document).ready(function(){ 
    truncateLabels("label"); 
}); 

function truncateLabels(element){ 
    var element_max_height = 20; 
    var arr = []; 
    arr[0] = ["Number", "#"]; 
    arr[1] = ["Percent", "%"]; 
    arr[2] = ["Invoice", "Inv"]; 

    if($(element).length){ 
     if($(element).height() > element_max_height){ 
      for(var i=0; i<arr.length; i++){ 
       $(element + ':contains("' + arr[i][0] + '")').each(function(){ 
        $(this).html($(this).text().replace(arr[i][0], arr[i][1], "gi")); 
       }); 
      } 
     } 
    } 
} 
</script> 

Это будет работать на всех браузерах.

Кроме того, я не понял, почему вы полагаетесь на высоту элемента.

Если вы хотите укоротить этикетку, вы можете использовать следующую библиотеку: trunk8

$(".truncate").trunk8({lines:1}); 
$(".truncate2").trunk8({lines:2}); 
$(".truncate3").trunk8({lines:3}); 

Answer 4

короткий и сладкий вариант с использованием JQuery и массив текстовых элементов

var labelTextArr=[ 
    ['Number', '#'], 
    ['Percent', '%'], 
    ['Invoice', 'Inv']   
    ]; 
var maxHt = 20 

$.each(labelTextArr, function(i, arr){  
    $('label:contains('+arr[0]+')').html(function(_, html){  
     return $(this).height() > maxHt ? html.replace(arr[0], arr[1]) : html; 
    });   
}); 

DEMO