JS - 随机按比例给英文句子字母添加下划线

最新推荐文章于 2023-07-19 22:53:28 发布

Lucy-

最新推荐文章于 2023-07-19 22:53:28 发布

阅读量512

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/lm1022/article/details/79092136

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

    var rate =0.5; //默认下划线比例为0.5

    function getRate(str,rate) {
        var str;
        this.str = str;
        this.rate = rate;
        console.log( this.str, this.rate )
        var arr = str.split("");
        var arr_len = Math.ceil(arr.length * rate);
        var my_array = getRandomArrayElements(arr, arr_len);
        for (var j in my_array) {
            if (!isEmpty(arr[j])) {
                arr[j] = "<u>" + arr[j] + "</u>";
            }
        }
        function getRandomArrayElements(arr, count) {
            var shuffled = arr.slice(0),
                    arr_len = arr.length,
                    temp,
                    index;
            var newArr = [];
            var index_arr = [];

            // console.log('min:' + count)
            for (i = 0; i < count; i++) {
                index = getRandomIndex('', index_arr, arr_len);
                temp = shuffled[index];
                newArr[index] = temp;
            }
            return newArr;
        }

        function getRandomIndex(index, indexArr, arr_len) {
            index = Math.floor((arr_len) * Math.random());
            if (checkArrIn(index, indexArr)) {
                return getRandomIndex('', indexArr, arr_len);
            } else {
                indexArr.push(index);
            }
            return index;
        }

        function isEmpty(obj) {
            if (obj === null) return true;
            if (typeof obj === 'undefined') {
                return true;
            }
            if (typeof obj === 'string') {
                if (obj === "") {
                    return true;
                }
                var reg = new RegExp(/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);
                // console.log(reg.test(obj))
                return reg.test(obj);
            }
            return false;
        }

        function checkArrIn(rand, array) {
            if (array.indexOf(rand) > -1) {
                return true
            }
            return false;
        }

        return document.write(arr.join(''));
    }

指定比例方法：

   function showUnderLine(rate) {
        var items = $(" .rateitem");
        for (var i = 0; i < items.length; i++) {
            var text = $(items[i]).text();
            $(items[i]).text('');
            $(items[i]).append(getRate(text, rate));
        }
    }   showUnderLine(0.5);// 默认添加 50%的下划线


 $(".set-rate").click(function() {
        var _this = $(this);
        if (_this.hasClass("set-choice")) {
            _this.siblings().removeClass("set-choice");
        } else {
            _this.addClass("set-choice");
            _this.siblings().removeClass("set-choice");
        }

        // 获取当前元素的私有属性，然后赋值
        showUnderLine(_this.attr('data-rate'))

 });

HTML：

 <div class="set-rate rate-10" data-rate="0.1">
 <p>10%</p>  </div>
<div class="set-rate rate-30" data-rate="0.3">
<p>30%</p> </div>
 <div class="set-rate set-choice rate-50" data-rate="0.5">
 <p>50%</p> </div>
<div class="set-rate rate-70" data-rate="0.7">
<p>70%</p> </div>
<div class="set-rate rate-90" data-rate="0.9">
<p>90%</p> </div>
 <div class="set-rate rate-100" data-rate="1">
<p>100%</p> </div>

效果如下：
这里写图片描述
*完整代码如下，可直接运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<style>
    u{
        color: red;
    }
</style>
<script>

//--------------------------------- 一词多空
function getRate(str, rate) {
        var str;
        this.str = str;
        this.rate = rate;
        console.log(this.str, this.rate)
        var arr = str.split("");
        var arr_len = Math.ceil(arr.length * rate);
        var my_array = getRandomArrayElements(arr, arr_len);

        for (var j in my_array) {
            if (!isEmpty(arr[j])) {
                arr[j] = "<u>" + arr[j] + "</u>";
            }
        }

        function getRandomArrayElements(arr, count) {
            var shuffled = arr.slice(0),
                    arr_len = arr.length,
                    temp,
                    index;
            var newArr = [];
            var index_arr = [];
            // console.log('min:' + count)
            for (i = 0; i < count; i++) {
                index = getRandomIndex('', index_arr, arr_len);
                temp = shuffled[index];
                newArr[index] = temp;
            }
            return newArr;
        }

        function getRandomIndex(index, indexArr, arr_len) {
            index = Math.floor((arr_len) * Math.random());
            if (checkArrIn(index, indexArr)) {
                return getRandomIndex('', indexArr, arr_len);
            } else {
                indexArr.push(index);
            }
            return index;
        }

        function isEmpty(obj) {
            if (obj === null) return true;
            if (typeof obj === 'undefined') {
                return true;
            }
            if (typeof obj === 'string') {
                if (obj === "") {
                    return true;
                }
                var reg = new RegExp(/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);
                // console.log(reg.test(obj))
                return reg.test(obj);
            }
            return false;
        }

        function checkArrIn(rand, array) {
            if (array.indexOf(rand) > -1) {
                return true
            }
            return false;
        }

        return arr.join('');
    }

//--------------------------------- 一词一空
function getword(str, rate) {
    var str;
    this.str = str;
    this.rate = rate;
    console.log(this.str, this.rate)
   var arr =  str.split(/\s+/);//返回单词数组
    // var arr =str.match(/\b\w+\b/g); //除去标点后单个单个英文单词
   var arr_len =  Math.ceil(arr.length * rate); //单词总长度*rate
    var my_array = getRandomArrayElements(arr, arr_len);

    for (var j in my_array) {
        if (!isEmpty(arr[j])) {
            arr[j] = "<u>" + arr[j] + "</u>";
        }
    }

    function getRandomArrayElements(arr, count) {
        var shuffled = arr.slice(0),
                arr_len = arr.length,
                temp,
                index;
        var newArr = [];
        var index_arr = [];
//         console.log('min:' + count)
       for (i = 0; i < count; i++) {
            index = getRandomIndex('', index_arr, arr_len);
            temp = shuffled[index];
            newArr[index] = temp;
        }
        return newArr;
    }

    function getRandomIndex(index, indexArr, arr_len) {
        index = Math.floor((arr_len) * Math.random());
        if (checkArrIn(index, indexArr)) {
            return getRandomIndex('', indexArr, arr_len);
        } else {
            indexArr.push(index);
        }
        return index;
    }

    function isEmpty(obj) {
        if (obj === null) return true;
        if (typeof obj === 'undefined') {
            return true;
        }
        if (typeof obj === 'string') {
            if (obj === "") {
                return true;
            }
            var reg = new RegExp(/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);
           // console.log(reg.test(obj))
            return reg.test(obj);
        }
        return false;
    }

    function checkArrIn(rand, array) {
        if (array.indexOf(rand) > -1) {
            return true
        }
        return false;
    }

    return arr.join(' ');
}


var str1 = "I'm Jamie . How can I help you ?";

document.write ("英文语句"+"<br/>"+str1+"<br/>"+"<br/>");
document.write( "一词多空,rate=1"+"<br/>"+getRate(str1, 1)+"<br/>"+"<br/>");
document.write( "一词多空,rate=0.5"+"<br/>"+getRate(str1, 0.5)+"<br/>"+"<br/>");
document.write ("一词一空,rate=1"+"<br/>"+getword(str1,1)+"<br/>"+"<br/>");
document.write ("一词一空,rate=0.5"+"<br/>"+getword(str1,0.5)+"<br/>"+"<br/>");
</script>


</html>

Lucy-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS - 随机按比例给英文句子字母添加下划线

var rate =0.5; //默认下划线比例为0.5 function getRate(str,rate) { var str; this.str = str; this.rate = rate; console.log( this.str, this.rate ) var arr = str.s...
复制链接

扫一扫

专栏目录