用vue来找到多个字符中相同的两位子串

最新推荐文章于 2023-05-28 20:47:24 发布

雨迹丶

最新推荐文章于 2023-05-28 20:47:24 发布

阅读量876

点赞数

文章标签： vue js jquery

本文链接：https://blog.csdn.net/weixin_46013810/article/details/106780067

版权

小雨在开发项目的时候, 面对页面调用了无数的接口时, 感到了一丝无力.
哥, 我要用的就是那两个接口, 不用你给我这么多啊…
为了从无数个接口中挑出那么几个, 小雨只好通过筛选了, 如果只是一两个还好能一眼看到相同的部分, 但是这个东西一旦多了, 小雨就头疼了.
还好小雨聪明的头脑想出了解决方案, 嘻嘻.
OK, 不侃了, 上干货.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <-- 这里随便下两个vue,jQuery文件就好 -->
    <script src="./vue.js"></script>
    <script src="./jQuery 1.10.2.js"></script>
</head>

<body>
    <div id="hello" class="hello">
        <div class="findSamePart">
            <button @click="findSameBtn()">寻找相同字段</button>
            <button @click="inputAdd()">添加</button>
            <button @click="inputDel()" v-show="inputID>1">删除</button>
            <h6>{{sameStr}}</h6>
            <ul class="inputList">
                <li><input type="text" id="input0"></li>
                <li><input type="text" id="input1"></li>
            </ul>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#hello",
        data() {
            return {
                inputID: 1,
                sameStr: "",
            }
        },
        methods: {
            inputAdd() {
            	// 增加字符
                this.sameStr = "";
                let valueTemp = []; //临时保存之前的值
                for (let i = 0; i <= this.inputID; i++) {
                    valueTemp[i] = $(`#input${i}`)[0].value;
                }
                let inputStr = `<li><input type="text" id="input${++this.inputID}"></li>`;
                $(".inputList")[0].innerHTML += inputStr;
                // 给之前的input赋值
                for (let i = 0; i <= this.inputID; i++) {
                    $(`#input${i}`)[0].value = valueTemp[i] ? valueTemp[i] : "";
                }
            },
            inputDel() {
            	// 删除字符
                let inputList = $(".inputList")[0];
                inputList.removeChild(inputList.children[this.inputID--]);
            },
            findSameBtn() {
            	// 寻找形同字符按钮
                let strList = [];
                for (let i = 0; i <= this.inputID; i++) {
                    strList.push($(`#input${i}`)[0].value);
                }
                console.log(strList);
                this.findSameList(...strList); //调用主函数
            },
            findSameList() {
            	// 寻找相同字符的主函数, 可以寻找两个以上的字符
                let args = arguments;
                let tempSame1 = this.findSame(args[0], args[1]);
                let tempSame2 = [];
                for (let i = 2; i < args.length; i++) {
                    for (let j = 0; j < tempSame1.length; j++) {
                        let tempIdx = args[i].indexOf(tempSame1[j]);
                        tempIdx != -1 ? tempSame2.push(tempSame1[j]) : "";
                    }
                    tempSame1 = tempSame2;
                    tempSame2 = [];
                }
                tempSame1 = Array.from(new Set(tempSame1));
                console.log("sameList=", tempSame1);
                this.sameStr = tempSame1.length > 0 ? `相同的部分有: ${tempSame1}` : "没有相同的部分";
            },
            findSame(str1, str2) {
            	// 寻找相同字符的功能函数, 只能寻找两个字符
                str1 = str1.toLowerCase();
                str2 = str2.toLowerCase();
                let sameItem = [];
                for (let i = 0; i < str1.length - 1; i++) {
                    for (let j = 0; j < str2.length - 1; j++) {
                        if (str1[i] + str1[i + 1] == str2[j] + str2[j + 1]) {
                            sameItem.push(str1[i] + str1[i + 1]);
                        }
                    }
                }
                return sameItem;
            }
        }
    })
</script>

</html>

效果图

在这里插入图片描述

主要思路

将多个字符, 拆分成两个进行对比, 用两个的对比结果与第三个对比.

雨迹丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用vue来找到多个字符中相同的两位子串

小雨在开发项目的时候, 面对页面调用了无数的接口时, 感到了一丝无力.哥, 我要用的就是那两个接口, 不用你给我这么多啊…为了从无数个接口中挑出那么几个, 小雨只好通过筛选了, 如果只是一两个还好能一眼看到相同的部分, 但是这个东西一旦多了, 小雨就头疼了.还好小雨聪明的头脑想出了解决方案, 嘻嘻.OK, 不侃了, 上干货.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&
复制链接

扫一扫