世俗永繁华 2019-12-09 23:41 采纳率: 0%
浏览 260

js实现div下文字与textarea输入文字对比

求大佬帮一下忙
目前只能实现两个div下文字对比
想实现一个div给出文字,一个textarea输入文字实时进行颜色对比
图片说明

以下是代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <div id="txt1">鹏之背,不知其几千里也。怒而飞,其翼若垂天之云。是鸟也,海运则将徙于南溟。</div>
<div id="txt2">鹏之背,不知其几千里也;怒而飞,其翼若垂天之云。是鸟也,海运则将徙於南冥。</div>

<div id="txt3"></div>
<div id="txt4"></div>

<script type="text/javascript">
<!--
    function compare_str(str1,str2){
        var res1 = "";
        var res2 = "";

        while(str1.length && str2.length){
            var arr = find_pos(str1,str2);

            if (arr && arr.length)
            {
                if (arr[0])
                {
                    res2 +=("<font color='green'>" + str2.substr(0,arr[0]) + "</font>");
                    str2 = str2.substr(arr[0]);
                }
                res1 +=(str1.substr(0,arr[1]));
                res2 +=(str2.substr(0,arr[1]));         

                str1 = str1.substr(arr[1]);
                str2 = str2.substr(arr[1]);

            }else{
                arr = find_max_pos(str1,str2); 
                tmp = find_match_pos(str1,str2);

                if (tmp.length)
                {               
                    if (arr[0]>tmp[0] && arr[1]>tmp[1])
                    {
                        arr = tmp;
                    }
                }

                if (arr!=undefined && arr.length)
                {               
                    res1 +=("<font color='black'>" + str1.substr(0,arr[0]) + "</font>");
                    res2 +=("<font color='red'>" + str2.substr(0,arr[1]) + "</font>");
                    res1 +=(str1.substr(arr[0],arr[2]));
                    res2 +=(str2.substr(arr[1],arr[2]));

                    str1 = str1.substr(arr[0]+arr[2]);
                    str2 = str2.substr(arr[1]+arr[2]);
                }else{
                    res1 +=("<font color='black'>" + str1 + "</font>");
                    res2 +=("<font color='red'>" + str2 + "</font>");
                    str1 = '';
                    str2 = '';
                }

            }
        }
        if (str1.length)
        {
            res1 +=("<font color='balck'>" + str1 + "</font>");
        }
        if (str2.length)
        {
            res2 +=("<font color='red'>" + str2 + "</font>");
        }



        document.getElementById("txt1").innerHTML = (res1); 
        document.getElementById("txt2").innerHTML = (res2); 
    }

    //从串2查找对串1前N个字符的最大匹配
    function find_pos(str1,str2){
        var len = 1, pos = 0;
        var ret;    

        while (pos>0){
            var str = str1.substr(0,len);
            pos = str2.indexOf(str);
            if (pos!=-1)
            {
                ret = [];
                ret.push(pos,len);
                len++;
                if (len>str1.length){
                    break;
                }

            }else{
                break;
            }
        }

        return ret;
    }

    //从串2查找对串1从第N个字符开始前N个字符的首次匹配
    function find_match_pos(str1,str2,arr){
        var len =1 , pos1 = 0, pos2 = 0, _pos2;
        var ffind = false;
        var ret = [];

        if (arr!=undefined)
        {
            pos1 = arr[0];pos2 = arr[1];
        }
        while((pos1+len)<str1.length){
            var str = str1.substr(pos1,len);
            _pos2 = str2.indexOf(str);
            if (_pos2!=-1)
            {
                ffind = true;len++;pos2 = _pos2;
            }else{
                if (ffind)
                {
                    len--;break;
                }else{
                    pos1 += len;len = 1;
                }
            }           
        }

        if (ffind)
        {
            ret.push(pos1,pos2,len);
        }else{
            ret = [];
        }

        return ret;
    }

    //查找下一个最适匹配
    function find_next_pos(str1,str2){

    }

    //查找两个字串的字符数目最大匹配
    function find_max_pos(str1,str2){
        var ret,pos1,pos2,arr=null;
        var res, max = 0;
        do
        {
            ret = find_match_pos(str1,str2,arr);
            if (ret.length)
            {
                if (ret[2]>max)
                {
                    res = ret;
                    max = ret[2];
                }

                arr = new Array(ret[0]+1,ret[1]);

            }
        }
        while (ret.length);

        return res;
    }

    function test(){
        var str1 = document.getElementById("txt1").innerText;
        var str2 = document.getElementById("txt2").innerText;

        compare_str(str1,str2);
    }


    test();

//-->
</script>
 </body>
</html>

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2019-12-10 08:53
    关注

    div 是.innerText ,txtArea是.value获取到后,遍历比较就行你可以参考一下这个https://blog.csdn.net/kzcming/article/details/80340929

    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB动图的问题
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名