как использовать jsdifflib для отображения результата в динамическом div - PullRequest
0 голосов
/ 19 ноября 2018

Я использую jsdifflib (https://github.com/cemerick/jsdifflib#demo) для сравнения текста на моей веб-странице. Я пытаюсь получить отдельную вкладку для каждого результата сравнения с помощью вкладок jquery-UI. Это работает. Но есть большая проблема:

Я сделал следующее изменение кода в diff.js для успешного вывода таблицы в мою переменную:

код от: diff.js

function diffUsingJS(viewType) {
    "use strict";
    var byId = function (id) { return document.getElementById(id); },
        base = difflib.stringAsLines(byId("baseText").value),
        newtxt = difflib.stringAsLines(byId("newText").value),
        sm = new difflib.SequenceMatcher(base, newtxt),
        opcodes = sm.get_opcodes(),
        diffoutputResult,      //orig    diffoutput    new:textCmpTabs
        //contextSize = byId("contextSize").value;   //orig
        contextSize = null;

    diffoutputResult = diffview.buildView({
        baseTextLines: base,
        newTextLines: newtxt,
        opcodes: opcodes,
        baseTextName: "Base Text",
        newTextName: "New Text",
        contextSize: contextSize,
        viewType: viewType
    });
    return diffoutputResult;
}

мой код jscript:

...
// Dynamic Tabs using jquery UI
function textCmpTabsAddTab(t,c) {
    var label = t,
        id = 'textCmpTabs-'+label,
        li = $( textCmpTabsTmpl.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        tabContentHtml = c;

    textCmpTabs.find(".textCmpTabs").append(li);
    textCmpTabs.append( '<div id="' + id + '"><p>').append(tabContentHtml).append('</p></div>');
    textCmpTabs.tabs( "refresh" );
}
...
...
$( "#sidebyside" ).click(function() {
    var diffResult = diffUsingJS(0);
    textCmpTabsAddTab(k,diffResult);
    k += 1;
    }
);

ВОПРОС: === Но все таблицы (результаты сравнения) отображаются на всех вкладках. Кажется, в diffview.js есть некоторые команды «document.createElement», которые создают объекты поверх всего документа. Я не уверен, как или почему, или если это что-то еще?

enter image description here

Может кто-нибудь объяснить, как получить результаты каждого матча только в своей вкладке (с пустой вкладкой по умолчанию)?

Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...