javascript：テキストの一部（日本語）だけタグで囲みたいです

###前提・実現したいこと
テキストの一部（日本語）を<span>タグで囲んで出力したいです。

<div>ここだけtag</div> ↓ <div><span>ここだけ</span>tag</div>

###試したこと
他にも違う文字群があるため、最初の4文字だけ・・のような指定ができません。
いろいろ調べて試してみましたが、全く実現できませんでした。。

おわかりになる方がいましたらご教示いただけますと幸いです。
よろしくお願い致します。

kei344

2017/03/30 07:30

コメントで「jsonから出力されたテキスト」と書かれていますが、その描画JavaScript部分のコードを質問文に追記してください。また、他の条件が無いかも再度精査してください。

行動規範の内容に同意します

回答2件

手順は、
0. divのテキストを取得します。
0. そのテキストに対して正規表現で置換処理します。
0. テキストをdivに入れます。

ですね。

１と３はjQueryでサクッとできるかと思いますので、ポイントは２ですかね。

javascript
1
2wrap_text = ”hogeほげhogeほげ”.replace(/日本語を示す正規表現/g,"<span>$&<\/span>");
3
4//日本語を示す正規表現のところは調べてください

$&で正規表現にマッチした箇所そのものを使えるので、spanタグの間に書くとspanタグに囲まれた形になります。正規表現のところで（[a-z]+）とか()で囲ったところを使いたい場合は$1とかで使えます。正規表現を使った置換の便利なところです。

投稿2017/03/29 15:46

oskbt

総合スコア1895

yamayukumo

2017/03/30 01:24

早々にご回答いただきありがとうございます！正規表現というものを聞いたことしかありませんでしたのでそこから調べて試してみます！

yamayukumo

2017/03/30 06:51

もしかすると大切なことを言っていなかったかもしれません。。 ”ここだけtag”はjsonファイルから出力された文字群で、 oskbtさんの方法で試したところ、htmlに直接記述したテキストではうまくいったのですが jsonから出力されたテキストには反映されませんでした。。何度も本当に申し訳ありませんが、もし別の方法をご存知でしたらご教示いただけますと幸いです。。どうぞよろしくお願い致します。

行動規範の内容に同意します

サンプルコード

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

指定文字列を含むテキストノードを置換する - JSFiddle

HTML
1<ul id="foo">
2  <li>foo1</li>
3  <li>foo2</li>
4  <li>foo3</li>
5  <li>
6    <ul>
7      <li>foo4-1</li>
8      <li>foo4-2 foo4-2</li>
9      <li>
10        <ul>
11          <li>foo4-3-1</li>
12          <li>foo4-3-2 foo4-3-2 foo4-3-2</li>
13        </ul>
14      </li>
15    </ul>
16  </li>
17</ul>
18
19<script>
20'use strict';
21var toXPathStringLiteral = (function () {
22  function replacefn (match, p1) {
23
24    if (p1) {
25      return ',\u0027' + p1 + '\u0027';
26    }
27
28    return ',"' + match + '"';
29  }
30
31  return function toXPathStringLiteral (string) {
32    string = String(string);
33
34    if (/^"+$/g.test(string)) {
35      return '\u0027' + string + '\u0027';
36    }
37
38    switch (string.indexOf('"')) {
39      case -1:
40        return '"' + string + '"';
41      case 0:
42        return 'concat(' + string.replace(/("+)|[^"]+/g, replacefn).slice(1) + ')';
43      default:
44        return 'concat(' + string.replace(/("+)|[^"]+/g, replacefn) + ')';
45    }
46  };
47}());
48
49function markupHighlight (targetString, contextNode) {
50  var doc = contextNode.nodeType === contextNode ? contextNode : contextNode.ownerDocument,
51      xpathResult = doc.evaluate('descendant::text()[contains(.,' + toXPathStringLiteral(targetString) + ')]', contextNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null),
52      df = doc.createDocumentFragment(),
53      mark = doc.createElement('mark');
54
55  mark.appendChild(doc.createTextNode(targetString));
56  mark.className = 'highlight';
57
58  for (var i = 0, xLen = xpathResult.snapshotLength, currentTextNode, stringList, textNode; i < xLen; ++i) {
59    currentTextNode = xpathResult.snapshotItem(i);
60    stringList = currentTextNode.data.split(targetString);
61    textNode = df.appendChild(doc.createTextNode(stringList[0]));
62    console.log(currentTextNode);
63    console.log(stringList);
64
65    for (var j = 1, stringLen = stringList.length, textNode; j < stringLen; ++j) {
66      df.appendChild(mark.cloneNode(true));
67      textNode = textNode.cloneNode(false);
68      textNode.data = stringList[j];
69      df.appendChild(textNode);
70    }
71
72    currentTextNode.parentNode.replaceChild(df, currentTextNode);
73  }
74}
75
76markupHighlight('foo', document.body);
77</script>