コンソール画面では同じ値に見えるのに、「===」での比較が「false」になってしまう

Question

実現したいこと

次のように<p>を<textarea>に置換しています。後に<textarea>の入力値が変更されたかどうかを判定したいです。

<p>私は "太郎" です</p>

<script>
// p を textarea に置換
const val = $('p').text();
const placeholder = htmlsce(val); 
$('p').replaceWith( `<textarea class="inp_name" placeholder="${placeholder}">${val}</textarea>` );
</script>

発生している問題

後に<textarea>の入力値が変更されたかどうかを判定したいので、初期値をplaceholderにセットしておき「<textarea>の入力値 === placeholderの値」での比較をしているのですが、

変更がないのにも関わらず「false」になってしまいます。

該当のソースコード

全体のソースコードはこちらで、isSameが「false」となるのが問題です。

https://jsfiddle.net/moch3pyt/

<p>私は "太郎" です</p>

<script>
// HTML特殊文字変換（通常文字 → 特殊文字）
var htmlsce = (function() {
  const map = {' ':'&nbsp;','<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;',"'":'&apos;','©':'&copy;'};
  return function(text, charset) {
    charset = charset && charset.replace(/([\x00-\x2F\x3A-\x40\x5B-\x60\x7B-\x7F])/g, '\\$&') || '';
    return text.replace(new RegExp('[ <>&"\'©'+charset+']', 'g'), function(match) {
      if (map.hasOwnProperty(match)) {
        return map[match];
      } else {
        return '&#'+match.charCodeAt(match)+';';
      }
    });
  };
})();

// HTML特殊文字変換（特殊文字 → 通常文字）
var htmlscd = (function() {
  const re = /&#x([0-9A-Fa-f]+);|&#(\d+);|&\w+;/g;
  const map = {'&nbsp;':' ','&lt;':'<','&gt;':'>','&amp;':'&','&quot;':'"','&apos;':"'",'&copy;':'©'};
  return function(text) {
    return text.replace(re, function(match, p1, p2) {
      if (match.charAt(1) == '#') {
        // 数値文字参照
        if (match.charAt(2) == 'x') {
          return String.fromCharCode(parseInt(p1, 16));
        } else {
          return String.fromCharCode(p2-0);
        }
      } else if (map.hasOwnProperty(match)) {
        // 定義済み文字実体参照
        return map[match];
      }
      return match;
    });
  };
})();

// p を textarea に置換
const val = $('p').text();
const placeholder = htmlsce(val); 
$('p').replaceWith( `<textarea class="inp_name" placeholder="${placeholder}">${val}</textarea>` );

// 「placeholderの初期値」と「textareaの入力値」が同じかどうか
const inpName = $('.inp_name').val();
const iniName = htmlscd( $('.inp_name').attr('placeholder') );
const isSame  = inpName === iniName;
console.log( inpName ); // 私は "太郎" です
console.log( iniName ); // 私は "太郎" です
console.log( isSame );  // false
</script>

試したこと

ご覧のようにコンソール画面で確認しており、明らかにinpNameもiniNameも同じ値に見えます。
つまりHTML特殊文字変換の関数はいずれも正常に思われます。

ではなぜ「===」での比較が「false」になるのか疑問です。

console.log( inpName ); // 私は "太郎" です
console.log( iniName ); // 私は "太郎" です
console.log( isSame );  // false

シンプルに以下にしても「fales」でした。（itagagakiさんのご指摘により訂正）
シンプルに以下にしたら「true」でした。

const text = '私は "太郎" です';
const sce = htmlsce(text);
const scd = htmlscd(sce);
const isSame = scd === text; //（itagagakiさんのご指摘により訂正）

console.log( sce );     // 私は "太郎" です
console.log( scd );     // 私は "太郎" です
console.log( isSame );  // true

また<textarea>ではなくcontenteditable=trueへの置換も試みてみたのですが、細かい仕様に対処できず断念致しました。

後に<textarea>の入力値が変更されたかどうかを判定するためには、上記の流れのどこを直すべきでしょうか？

Comments

[m.ts10806]

==
ではどうでしょうか。

[takasima20]

エンコードしたやつとデコードしたやつを比較したらフツーに不一致では?

[itagagaki]

const text = '私は "太郎" です';
const sce = htmlsce(text);
const scd = htmlscd(sce);
const isSame = sce === scd;

これは本当は
const isame = scd === text;
をやってみたかったのかな？

[nikuatsu]

itagagakiさん、意図を汲み取って頂きありがとうございます。仰る通りです。

Answer 1

• https://codepen.io/arcxor/pen/NWXRzGj

なんというか、その独自のエンコード、デコード関数を作るのはやめた方がいいと思います。その独自関数がバグっています。

Comments

[nikuatsu]

ありがとうございます。attrはそのようにオブジェクトで書けるんですね。いいですね。こうすればダブルクオートがあっても問題ないですね。

関数はいつかどこかで拾ったものを何も考えずに使っていたので大いに反省です…。
でもコンソール画面には同じ値に見えるのにどうして、というのはやはり少し疑問です。

[arcxor]

> でもコンソール画面には同じ値に見えるのにどうして、というのはやはり少し疑問です。

コードポイントを確認してください。空白が nbsp になっています。

https://codepen.io/arcxor/pen/BaJLqdR

// [object Array] (10)
[31169,12399,32,34,22826,37070,34,32,12391,12377]

// [object Array] (10)
[31169,12399,160,34,22826,37070,34,160,12391,12377]

[nikuatsu]

すごい、こんな風に確認するんですね！どうもありがとうございます。大変勉強になりました。

Answer 2

普通にやれば問題ないと思いますが・・・

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const p=document.querySelector('p');
  p.parentNode.insertBefore(Object.assign(document.createElement('textarea'),{placeholder:p.textContent,textContent:p.textContent}),p);
  p.remove();
  document.querySelector('textarea').addEventListener('input',e=>{
    const t=e.target;
    console.log(t.getAttribute('placeholder')===t.value);
  });
});
</script>
<p>私は &quot;太郎&quot; です</p>

念の為

window.addEventListener('DOMContentLoaded', ()=>{
  const p=document.querySelector('p');
  const ta=document.createElement('textarea');
  ta.setAttribute('placeholder',p.textContent);
  ta.value=p.textContent;
  p.parentNode.insertBefore(ta,p);
  p.remove();
  document.querySelector('textarea').addEventListener('input',e=>{
    const t=e.target;
    console.log(t.getAttribute('placeholder')===t.value);
  });
});

Comments

[nikuatsu]

ありがとうございます。コード参考にさせていただきます。
「入力値」のダブルクオートと、「plaeholder=""」のダブルクオートとが衝突しないかと心配だったので質問のように変換関数を使ったのですが、Object.assignでplaceholderを指定すれば変換関数は不要だったのですね。勉強になりました。

[yambejp]

> Object.assignでplaceholderを指定すれば変換関数は不要

普通にdocument.createElement('textarea')した上で、setAttribute('placeholder',値)でも行けるはずです。
その場合textareaのvalueプロパティを更新するほうが楽です

[nikuatsu]

ご返信ありがとうございます。なるほど、私のテンプレートリテラルの方法が普通じゃなかったんですねｗテンプレートリテラルでやろうとしてダブルクオートがネックになり、妙な変換関数を使おうとして、余計な混乱を招いてしまったようですね…呆れちゃいます(*´д｀)=з

[nikuatsu]

setAttribute版ありがとうございます。そちらも参考にさせていただきます。