时间戳

首页 > 解决方案 > Javascript Diff算法不适用于HTML代码

javascript - Javascript Diff算法不适用于HTML代码

问题描述

我正在尝试使用Javascript Diff 算法将文本字符串输入与段落进行比较。这是我的代码。

HTML

<p id="db_structure">&lt;div class=&quot;myparent&quot;&gt;
            &lt;div&gt;
            &lt;div class=&quot;pdp-product-price test&quot; id=&quot;lll&quot;&gt;
            &lt;span&gt;650 rupees&lt;/span&gt;
            &lt;div class=&quot;origin-block&quot;&gt;
            &lt;span&gt;1,500 rupees&lt;/span&gt;
            &lt;span&gt;-57%&lt;/span&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;</p>
        <textarea name="new_structure" width="100"></textarea>
        <button id="compare">Compare</button></body>

这是我的 js 代码。

$(function () {
                $.fn.diffString = function (txt) {
                    return this.each(function () {
                        $(this).html(diffString($(this).text(), txt));
                    });
                };

                $('#compare').click(function () {
                    var newstr = $("textarea[name=new_structure]").val();
                    $('#db_structure').diffString(newstr);
                });
            });

但如果我输入，<div class="myparent"> <div> <div class="pdp-product-price test" id="lll"> <span>650 rupees</span>它会显示，

650 卢比<div class="origin-block"> <span>1,500 rupees</span> <span>-57%</span> </div> </div> </div> </div>

但正确的输出应该是

<div class="myparent"> <div> <div class="pdp-product-price test" id="lll"> <span>650 rupees</span> <div class="origin-block"> <span>1,500 rupees</span> <span>-57%</span> </div> </div> </div> </div>

我做错什么了吗？

我在 $.fn.diffString 中记录了diffString ( $(this).text(), txt)。

代码，

$.fn.diffString = function(txt){
    return this.each(function(){
        console.log(diffString($(this).text(), txt));

        $(this).html(diffString($(this).text(),txt));
    });
};

输出，

    <div  class="myparent">  <div>  <div  class="pdp-product-price  test"  id="lll">  <span>650  rupees</span>
<del>&lt;div </del><del>class=&quot;origin-block&quot;&gt;
                </del><del>&lt;span&gt;1,500 </del><del>rupees&lt;/span&gt;
                </del><del>&lt;span&gt;-57%&lt;/span&gt;
            </del><del>&lt;/div&gt;
        </del><del>&lt;/div&gt;
    </del><del>&lt;/div&gt;
</del><del>&lt;/div&gt;
</del>

标签： javascriptjquery

解决方案

最后我找到了另一种方法。不幸的是，它包括更改插件。我从这个jsfiddle找到了这段代码。在插件代码中，我们必须更改，

在diffString()函数内部，

改变，

str += " " + out.n[i].text + nSpace[i] + pre;

到，

str += " " + escape(out.n[i].text) + nSpace[i] + pre;

希望别人会发现它有用

推荐阅读