0

ある要素の innerText/textContent のうち、特定の正規表現(例: /#\d+/)に該当する文字列をタグで囲み、イベントハンドラを設定したいと考えています。例えば、<p>その件は #123 を参照してください。</p> というHTMLの中で #123 にマウスカーソルを乗せると、対応するIssueの詳細がポップアップされる、といったものです。

一つ思いついた方法としては、innerHTML に対して置換を行うものです。

target.innerHTML = target.innerHTML
                   .replace(/#(\d+)/g, (s, id) => `<a href=".../${id}">${s}</a>`);

単純なリンクに置き換えるだけならこれでもいいのですが、設定する属性やイベントハンドラが多くなってくるとタグに記載するのは面倒ですし、読みにくくなってしまいます。かといってこの時点では文字列なので、Elementオブジェクトにはアクセスできません。

UserScript として作る都合上、できれば class 属性等を使うのも避けたいです(対象ページでの使用箇所と競合する可能性があるので)。

選択範囲に対して同様のことをした時には Range.prototype.surroundContents() が使えたので、今回もマッチ範囲をRangeで取得する、なんてことができれば簡単そうなのですが…。

2 件の回答 2

1

XPath式 descendant::text()[contains(.,"#123")] を使用する事で文字列「"#123"」を含むテキストノードを得る事が可能です。
ただし、XPath 1.0 では " のエスケープシーケンスが利用できない為、concat() を利用して対応させます(詳細は後述の参考リンクを参照)。

(2017/03/30 08:00追記)
すみません。質問内容を誤解していました。
正規表現でマッチさせるなら「XPath式 :matches() を使う」もしくは「全てのテキストノードを参照後に /#\d+/.test(textNode.data)while 文で回す」方法が考えられます。

'use strict';
var toXPathStringLiteral = (function () {
  function replacefn (match, p1) {

    if (p1) {
      return ',\u0027' + p1 + '\u0027';
    }

    return ',"' + match + '"';
  }

  return function toXPathStringLiteral (string) {
    string = String(string);

    if (/^"+$/g.test(string)) {
      return '\u0027' + string + '\u0027';
    }

    switch (string.indexOf('"')) {
      case -1:
        return '"' + string + '"';
      case 0:
        return 'concat(' + string.replace(/("+)|[^"]+/g, replacefn).slice(1) + ')';
      default:
        return 'concat(' + string.replace(/("+)|[^"]+/g, replacefn) + ')';
    }
  };
}());

function handleClick (event) {
  console.log(event.target.textContent);
}

function markupHighlight (targetString, contextNode) {
  var doc = contextNode.nodeType === contextNode ? contextNode : contextNode.ownerDocument,
      xpathResult = doc.evaluate('descendant::text()[contains(.,' + toXPathStringLiteral(targetString) + ')]', contextNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null),
      df = doc.createDocumentFragment(),
      mark = doc.createElement('mark');

  mark.appendChild(doc.createTextNode(targetString));

  for (var i = 0, xLen = xpathResult.snapshotLength, currentTextNode, stringList, textNode; i < xLen; ++i) {
    currentTextNode = xpathResult.snapshotItem(i);
    stringList = currentTextNode.data.split(targetString);
    textNode = df.appendChild(doc.createTextNode(stringList[0]));

    for (var j = 1, stringLen = stringList.length, textNode; j < stringLen; ++j) {
      mark = mark.cloneNode(true);
      df.appendChild(mark);
      mark.addEventListener('click', handleClick, false);
      textNode = textNode.cloneNode(false);
      textNode.data = stringList[j];
      df.appendChild(textNode);
    }

    currentTextNode.parentNode.replaceChild(df, currentTextNode);
  }
}

markupHighlight('foo', document.body);
mark {
  color: black;
  background-color: #ddf;
  border: solid 1px #55f;
}
<ul id="foo">
  <li>foo1</li>
  <li>foo2</li>
  <li>foo3</li>
  <li>
    <ul>
      <li>foo4-1</li>
      <li>foo4-2 foo4-2</li>
      <li>
        <ul>
          <li>foo4-3-1</li>
          <li>foo4-3-2 foo4-3-2 foo4-3-2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

参考リンク

Re: user20204 さん

1
  • 回答ありがとうございます。rio.irikamiさんの回答と比べると、テキストノードの抽出をXPathで行っているのと、分割・置換のやり方が変わっているのですね。追記いただいたように、今回はこのまま採用するのは難しいですが、パターンに含まれるキーワードを含むノードをXPathでざっくり抽出して、後で正規表現に厳密にチェックする、というのは悪くないかもしれません。(キーワードすら含まないノードに正規表現マッチを行う必要はないですしね)
    – user20204
    Commented 2017年3月29日 23:14
1

DOMはDOMオブジェクトで表現されていないものに対する操作がとても苦手です。というかほぼできません。逆に言えばDOMに落とし込めれば操作可能になります。
HTMLにおける文字列はDOMにおいてnodeType === TEXT_NODEのNodeオブジェクト、いわゆるtextNodeとして構成されますが、このオブジェクトは任意長の部分文字列に分割することが可能です(子要素にtextNodeがいくつあってもよい/最初のtextNodeが.textContentに一致するわけではない)。今回のアプローチではまず対象となる文字列を部分文字列のtextNodeに分割します。
しかしながらtextNodeはEventTargetを継承していません(Node instanceof EventTarget === false)ので、ふつうのDOM要素(HTMLElement)とは異なりイベントを登録できません。これを解決するために、質問内容でいうところの「HTML要素に置き換える」操作が解決方法になるわけです。
以下、サンプルコードでは部分文字列の生成と置換を同時に行っています。部分文字列の検索はtextNodeをNodeIteratorによる列挙で抽出し、それぞれのtextNodeの内容を文字列検索・分割・置換しています。関数__replaceTextNodesは置換した要素への参照配列をかえしますので、その後のアプリケーションでイベントハンドラの登録等に利用できます。全体としてはRange.prototype.surroundContents()のpolyfillのような印象になりました。

const __getTextNodesByContent = (target, pattern) => {
    // get iterator
    const textNodeIterator = document.createNodeIterator(
        // search for
        target,
        // enumerate for
        NodeFilter.SHOW_TEXT,
        // filter
        {
            acceptNode: node => pattern.test(node.textContent) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT,
        }
    );

    // into array
    const ret = [];
    let current;
    while (current = textNodeIterator.nextNode()) {
        ret.push(current);
    }

    return ret;
};

const __replaceTextNodes = (target, pattern, replace) => {
    // get the list of textNodes that contains /pattern/
    const matchedTextNodes = __getTextNodesByContent(target, pattern);

    // for each textnode
    const ret = [];
    for (const node of matchedTextNodes) {
        // replace each part of textNode
        let currentNode = node;
        let matches;

        while (pattern.lastIndex = 0, matches = pattern.exec(currentNode.textContent)) {
            // separate [currentNode|<before><match><after>]
            // into [currentNode|<before>] [nextNode|<match><after>]
            const nextNode = currentNode.splitText(matches.index);

            // slice <match> part; [currentNode|<before>] [nextNode|<after>]
            nextNode.textContent = nextNode.textContent.slice(matches[0].length);

            // insert surround <match> part as a new sibling;
            // [currentNode|<before>] [surroundNode|<match>] [nextNode|<after>]
            const surroundNode = replace(matches[0]);
            nextNode.parentElement.insertBefore(surroundNode, nextNode);

            // store reference
            ret.push(surroundNode);

            // next
            currentNode = nextNode;
        }
    }

    // return a list of surround elements
    return ret;
};

//
// for example
//
const $target = document.body;
const targetPattern = /Lorem|massa|ridiculus|pellentesque/gi;

const surroundElements = __replaceTextNodes($target, targetPattern, text => {
    // surround with <span>, colored with red, add title attribute
    const el = document.createElement('span');
    el.textContent = text;
    el.style.color = 'red';
    el.title = 'surround with <span>, text content is "' + text + '";';
    return el;
});

// event handler filterd by surround elements
window.addEventListener('click', e => {
    if (surroundElements.includes(e.target)) {
        console.log('click', e.target);
    }
});

// or for each surround elements
/*
for (const se of surroundElements) {
    se.addEventListener(evt, fn);
}
*/
<h1>Lorem Lorem ipsum dolor sit amet consectetuer adipiscing 
elit</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa 
<strong>strong</strong>. Cum sociis natoque penatibus 
et magnis dis parturient montes, nascetur ridiculus 
mus. Donec quam felis, ultricies nec, pellentesque 
eu, pretium quis, sem. Nulla consequat massa quis 
enim. Donec pede justo, fringilla vel, aliquet nec, 
vulputate eget, arcu. In enim justo, rhoncus ut, 
imperdiet a, venenatis vitae, justo.</p>

<h2>Lorem ipsum dolor sit amet consectetuer adipiscing 
elit</h2>

<h3>Aenean commodo ligula eget dolor aenean massa</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem.</p>

<ul>
  <li>Lorem ipsum dolor sit amet consectetuer.</li>
  <li>Aenean commodo ligula eget dolor.</li>
  <li>Aenean massa cum sociis natoque penatibus.</li>
</ul>

期待した動作ではない、バグがある、その他不明な点についてはコメントをお願いします。


参考:

innerHTMLプロパティの変更によるDOMの操作は極めて高コストかつリスクが高いことを認識しておいてください。個人的な意見としては何が何でも使わないと実現できない場合のみ使用するものとし、リフレクション目的以外では使用禁止にしたいぐらいです。次の例では何の変更もしていないようで、body以下すべての要素が置換されています。

const $target = document.querySelector('#target');
$target.addEventListener('click', e => console.log(e));

// will be true
console.log($target === document.querySelector('#target'));

// reconstruct; SCRAP AND REBUILD ALL DOM ELEMENTS
document.body.innerHTML = document.body.innerHTML;

// will be false
console.log($target === document.querySelector('#target'));

// now no event listener attached to <div#target>
<div id="target">target element</div>

1
  • 回答ありがとうございます。概ねうまく動いているのですが、例えばご提示いただいた例で言えば Lorem Lorem のように、マッチする文字列が連続すると前半しか処理されないようです。
    – user20204
    Commented 2017年3月29日 15:09

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。