javascriptで置換した文字列をもとに戻したい

Question

javascript初学者です。
以下のように、クリックイベントを取得し関数でwebページ内の文字列をDOMで置換しています。

$(function(){
    $('.changebutton'),on('click',function(){
        文字列置換処理
    }

書き換えられたwebページをリフレッシュ以外で元に戻したいのですがどういったアプローチが可能でしょうか。

Comments

[m.ts10806]

置換の処理も省略せずに追記してください。それによってやり方も考えなければなりません。

Answer 1

眠い…。

<tagname class="restorable" data-original="hogehage">hogehage</tagname>

$(function(){
    $(".changebutton").on("click", function()
    {
        // 文字列置換処理
    });

    $(".restore").on("click", function()
    {
        $(".restorable").each(function()
        {
            $(this).text($(this).data("original"));
            return true;
        });
    });
})();

Comments

[退会済みユーザー]

もう、luckerお兄さんの回答が素晴らしすぎるなぁ…。根本的に次元が違うし。

[退会済みユーザー]

マイナス付けてる奴について、運営は何もしないんだよなぁ…。

[退会済みユーザー]

本当に、teratailの評価システムはクズ過ぎて話にならんな。

[退会済みユーザー]

運営が可哀そうだから文句言わないでいてやるだけって事、分かってるのかな？

[Lhankor_Mhy]

最後の行にtypoありますよ。

[退会済みユーザー]

弘法も眠いと筆を誤るのです。
でも、そこは趣旨とは関係ないのでどうでもいいのです。

[Lhankor_Mhy]

普通に typo 指摘しただけなのですが、何かしらの意図をお感じになったのなら誤解です。
まあ、もしかして誤解されるかもなあ、という予想もしないでもなかったので、大して気にはしていないのですが。

そういうわけではなくて、lucker さんが typo 指摘を受ける度に何か一言言わないと気が済まないたちなのでしたら、失礼いたしました。

[退会済みユーザー]

typo指摘受ける如何にかかわらず何か一言いわないと気が済まないたちなのは知ってくるくせに。

[Lhankor_Mhy]

そうなんですか。口が悪いだけの人だと思ってましたが、そら面倒ですね。

[退会済みユーザー]

そらもう、面倒ですよ。

Answer 2

原則として、書き換える直前に「元の文字列」をバックアップします。

data-* 属性 -> input要素

.changebutton がbutton関係要素の値を書き換えている事を意図しているように感じたので、input要素の書き換え版。

<p><input type="button" class="target" value="Hello, World!"><input type="button" class="change1" value="change"><input type="button" class="reset1" value="reset"></p>
<p><input type="button" class="target" value="Hello, World!"><input type="button" class="change1" value="change"><input type="button" class="reset1" value="reset"></p>
<p><input type="button" class="target" value="Hello, World!"><input type="button" class="change1" value="change"><input type="button" class="reset1" value="reset"></p>

<script>
'use strict';
jQuery('.change1').on('click', function (event) {
  var input = event.target.parentNode.querySelector('.target');

  console.dir(input.attributes['data-defaultvalue'])

  if (!input.attributes['data-defaultvalue']) {
    input.setAttribute('data-defaultvalue', input.value);
  }

  input.value = input.value.replace(/World/g, 'JavaScript');
});

jQuery('.reset1').on('click', function (event) {
  var input = event.target.parentNode.querySelector('.target');

  if (input.attributes['data-defaultvalue']) {
    input.value = input.getAttribute('data-defaultvalue');
  }
});
</script>

data-* 属性 -> テキストノード

親要素にテキストノード値を保存する。

<p>Hello, World!<input type="button" class="change2" value="change"><input type="button" class="reset2" value="reset"></p>
<p>Hello, World!<input type="button" class="change2" value="change"><input type="button" class="reset2" value="reset"></p>
<p>Hello, World!<input type="button" class="change2" value="change"><input type="button" class="reset2" value="reset"></p>

<script>
'use strict';
jQuery('.change2').on('click', function (event) {
  var p = event.target.parentNode,
      textNode = p.firstChild;

  if (!p.attributes['data-defaultvalue']) {
    p.setAttribute('data-defaultvalue', textNode.data);
  }

  textNode.data = textNode.data.replace(/World/g, 'JavaScript');
});

jQuery('.reset2').on('click', function (event) {
  var p = event.target.parentNode;

  if (p.attributes['data-defaultvalue']) {
    p.firstChild.data = p.getAttribute('data-defaultvalue');
  }
});
</script>

祖先要素にテキストノード値を保存する。

<p class="parent">Good morning, World! <span>Hello, World!</span> Good evening, World!<input type="button" class="change3" value="change"><input type="button" class="reset3" value="reset"></p>
<p class="parent">Good morning, World! <span>Hello, World!</span> Good evening, World!<input type="button" class="change3" value="change"><input type="button" class="reset3" value="reset"></p>
<p class="parent">Good morning, World! <span>Hello, World!</span> Good evening, World!<input type="button" class="change3" value="change"><input type="button" class="reset3" value="reset"></p>

<script>
'use strict';
jQuery('.change3').on('click', function (event) {
  var p = event.target.parentNode,
      textNodeSnapshot = p.ownerDocument.evaluate('descendant::text()', p, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

  if (!p.attributes['data-defaultvalue']) {
    var textList = [];

    for (var i = 0, len = textNodeSnapshot.snapshotLength; i < len; ++i) {
      var textNode = textNodeSnapshot.snapshotItem(i);

      textList.push(textNode.data);
      textNode.data = textNode.data.replace(/World/g, 'JavaScript')
    }

    p.setAttribute('data-defaultvalue', JSON.stringify(textList));
  } else {
    for (var i = 0, len = textNodeSnapshot.snapshotLength; i < len; ++i) {
      var textNode = textNodeSnapshot.snapshotItem(i);

      textNode.data = textNode.data.replace(/World/g, 'JavaScript')
    }
  }
});

jQuery('.parent').on('click', function (event) {
  var input = event.target;

  if (!input.classList.contains('reset3')) {
    return;
  }

  var p = event.currentTarget;

  if (p.attributes['data-defaultvalue']) {
    var textList = JSON.parse(p.getAttribute('data-defaultvalue')),
        textNodeSnapshot = p.ownerDocument.evaluate('descendant::text()', p, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null),
        len = textNodeSnapshot.snapshotLength;

    if (textList.length !== len) {
      throw new Error;
    }

    for (var i = 0; i < len; ++i) {
      textNodeSnapshot.snapshotItem(i).data = textList[i];
    }
  }
});
</script>

このコードは、要素とテキストノードが1対1でない場合に有効に働かない事を意味しています。
バックアップした後に動的にテキストノードが増減したら、破綻してしまうからです。

WeakMap -> テキストノード

WeakMap を使う事でテキストノードに「元の文字列」を保存することが出来ます。

<p class="parent">Good morning, World!<input type="button" class="change4" value="change"><input type="button" class="reset4" value="reset"> <span>Hello, World!<input type="button" class="change4" value="change"><input type="button" class="reset4" value="reset"></span> Good evening, World!<input type="button" class="change4" value="change"><input type="button" class="reset4" value="reset"></p>
<p class="parent">Good morning, World!<input type="button" class="change4" value="change"><input type="button" class="reset4" value="reset"> <span>Hello, World!<input type="button" class="change4" value="change"><input type="button" class="reset4" value="reset"></span> Good evening, World!<input type="button" class="change4" value="change"><input type="button" class="reset4" value="reset"></p>
<p class="parent">Good morning, World!<input type="button" class="change4" value="change"><input type="button" class="reset4" value="reset"> <span>Hello, World!<input type="button" class="change4" value="change"><input type="button" class="reset4" value="reset"></span> Good evening, World!<input type="button" class="change4" value="change"><input type="button" class="reset4" value="reset"></p>

<script>
'use strict';
(function () {
  function handleClick1 (event) {
    var input = event.target,
        textNode = input.previousSibling,
        wm = event.data;

    if (!wm.has(textNode)) {
      wm.set(textNode, textNode.data);
    }

    textNode.data = textNode.data.replace(/World/g, 'JavaScript');
  }

  function handleClick2 (event) {
    var input = event.target,
        textNode = input.previousSibling.previousSibling,
        wm = event.data;

    if (wm.has(textNode)) {
      textNode.data = wm.get(textNode);
    }
  }

  function main () {
    var wm = new WeakMap;

    jQuery('.change4').on('click', wm, handleClick1);
    jQuery('.reset4').on('click', wm, handleClick2);
  }

  main.call(this);
}.call(this));
</script>

Re: KShiramiz さん

Comments

[退会済みユーザー]

luckerお兄さんのパクリじゃないかっ！

[shiramiso]

ありがとうございます。やはりバックアップしておく必要があるのですね。。
逆置換は検討していたのですが、もし変換前のDOMに戻る機能があればと思い…
サンプルコードもいただきとても分かりやすかったです。ありがとうございました。

Answer 3

置換をしないで表示だけ入れ替える、というのはどうでしょうか。

<div id="a">置換前</div>
<div id="b" class="hide">置換後（実は置換していない）</div>
<div id="change">置換する</div>
<div id="undo">戻す</div>

$('#b').hide();
$('#change').on('click',function(){
  $('#b').show();
  $('#a').hide();
});
$('#undo').on('click',function(){
  $('#a').show();
  $('#b').hide();
});

Comments

[退会済みユーザー]

んと、ごちゃごちゃして汚くなりそうじゃないかなかな？

[think49]

すみません、また+評価→ゼロ評価をやってしまいました。
モバイル端末での操作は気をつける必要がありますね…。
後程、代替案を回答します。

[Lhankor_Mhy]

システム上許されている操作なのですから、乱用したわけでもなく特段問題はないのでは、と思います。

Mutationobserver で監視して、MutationRecord を履歴としてログっておく、というのを思いついたのですが、非現実的すぎてやめました。

Answer 4

思いつく手法とその問題点を羅列してみました。
①　置き換え前のDOMを保存しておく。
- 置き換え前のDOMを保存したDOMを特定できる一意のKeyを用意する必要がある
- DOMを保存するのでコストが高い
- 正直スマートではない（笑

②　置き換え後の文字列が一意に特定できるものであれば現在の状態を判断して逆置換をかける
処理を実装する。
- 置き換え後の文字列が元の文字列に出現する場合、逆置換すると異なるDOMになってしまう。

③　DOMの文字列置換をそもそも止め、DOM自体の表示、非表示を切り替えることで同様の機能を実装する。
- 用途や書き方によってはhtmlソースやJavascriptが汚くなる。

④　置き換え対象のDOMや文字列が決め打ちして問題無いものであれば決め打ちで置き換え処理、逆置換処理を実装する。
- 決め打ちになるので使えるケースが限られてくる。

など、普通過ぎてあんまり中身ないですね 汗

Comments

[nitoage]

必要であればコメントいただければsampleソースを添付します。

[退会済みユーザー]

んと、ごちゃごちゃして汚くなりそうじゃないかなかな？

[shiramiso]

概念的なところを知りたかったので、拙い質問に対して的を射たご回答をしてくださり、とても助かりました。プロコンもまとめていただき、とても分かりやすかったです。ありがとうございました。