简化工作函数以替换特定单词

Simplify a working function to replace specific words?

本文关键字：单词 替换 工作 函数      更新时间：2023-09-26

我有一个函数，可以在标签包装时缩短某些单词（以适应各种分辨率）。我的功能正在发挥作用，但我认为它可以简化。。。只是我不知道怎么做。随着我在这里添加更多的单词，重复可能很快就会失控。我可以把长单词/短单词放在一个数组中，然后一次输入所有内容吗？我无法让小提琴工作（尽管它正在我的项目中工作），但给你。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));
        });
    }
}

//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，而且我写的替换过程是区分大小写的。

使用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

以下是代码：

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

这在任何方面都是更优化的方式：

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/

相关文章：