Comparing Html string that contains style

[xitox97]

Hi, is there a way to compare correctly for case like this?

I need to compare by word, it will become a problem if the element tag contains different style property. The comparison result will return unnecessary closing tag"/>".

Original

<div>
    <p style="text-align:left;"><span style="color: rgb(32,33,36);font-size: 24px;">Hello World</span></p>
    <p style="text-align:left;"><span style="font-size: 24px;">John Doe</span></p>
</div>

New

<div>
    <p style="text-align:right"><span style="color: rgb(32,33,36);background-color: rgb(248,249,250);font-size: 124px;">Hello World</span></p>
    <p style="text-align:right;"><span style="font-size: 24px;">Maria Doe</span></p>
</div>

[jfcherng]

Tested with the demo. I can't reproduce this or I don't know what you mean.

Ideally, provide a minimal case that I can use with simply copy and paste like this.

[xitox97]

Hi, sorry for confusion. Here some details:

The string is input from WYSIWYG editor. User can choose different style. Since the user is able to do this, some of the text may have or not have certain html element tag. Therefore when do the comparing it will return a weird result since its comparing based on raw html.

php-diff settings:

    $differOptions = [
            'context' => 3,
            'ignoreCase' => false,
            'ignoreWhitespace' => false,
        ];

        $rendererOptions = [
            'detailLevel' => 'word',
            'lineNumbers' => true,
            'separateBlock' => true,
            'showHeader' => false,
            'spacesToNbsp' => false,
            'tabSize' => 4,
            'mergeThreshold' => 0.8,
            'cliColorization' => RendererConstant::CLI_COLOR_ENABLE,
            'outputTagAsString' => false,
            'jsonEncodeFlags' => \JSON_UNESCAPED_SLASHES | \JSON_UNESCAPED_UNICODE,
            'wordGlues' => [' ', '-'],
            'resultForIdenticals' => null,
            'wrapperClasses' => ['diff-wrapper'],
        ];

Old Value

$old = '<p><span style="color: rgb(250,197,28);background-color: rgb(226,80,65);font-size: 14px;"><strong>Hello Friend</strong></span></p><p><span style="color: rgb(147,101,184);font-size: 72px;font-family: Tahoma;"><strong><em><ins>John Doe</ins></em></strong></span></p>';

New Value

$new = '<p><strong>Hello Friends</strong></p><p><span style="color: rgb(147,101,184);font-family: Tahoma;">Maria Doe</span></p>';

Triggering the comparison function

$resultDescription = DiffHelper::calculate($old, $new, 'Combined', $differOptions, $rendererOptions);

Raw Result:

<table class="diff-wrapper diff diff-html diff-combined">
  <tbody class="change change-rep">
    <tr data-type="!">
      <td class="rep">
        <p<del>><span style="color: rgb(250,197,28);background-color: rgb(226,80,65);font-size: 14px;" </del>><strong>Hello <del>Friend</del><ins>Friends</ins></strong></<del>span></< /del>p>
      </td>
    </tr>
    <tr data-type="!">
      <td class="rep">
        <p><span style="color: rgb(147,101,184);font-<del>size: 72px;font-</del>family: Tahoma;"><del><strong><em><ins>John</del><ins>Maria</ins> Doe<del></ins></em></strong></del></span></p>
      </td>
    </tr>
  </tbody>
  <tbody class="change change-eq">
    <tr data-type=" ">
      <td class="new"></td>
    </tr>
  </tbody>
</table>

Screenshot:

JS Fiddle

I think it is quite impossible to compare by word if case like this. Do you know if got other solutions?

[jfcherng]

This lib has no special treatment for HTML input. It simply treats the input as "text" and output diff as "text". You need to find something parses inputs into DOM AST and then do DOM diff. I don't plan to do that in person since I feel no code can be reused (and I don't need that).

[jfcherng]

Maybe try https://github.com/caxy/php-htmldiff but I haven no experience on using it.

[xitox97]

Maybe try https://github.com/caxy/php-htmldiff but I haven no experience on using it.

Thank you very much, this is what I need.