【画像あり】replaceで置換した文字にmouseover要素を加えたい

前提・実現したいこと

replaceと配列を使って、翻訳機のようなものを作りたいと考えています。
置換後の語句にカーソルを載せると、翻訳前の語句が表示されるようなプログラミングを作りたいです。

実現したい流れ

発生している問題・エラーメッセージ

replaceで置き換えた文字にmouseover要素を加えたい。

置換後の語句にHTML要素(mouseoverを加えたり、文字にリンクを貼ったり)を持たせる方法に詰まってしまいました。
または、replaceを使って、同じ動きをするプログラミング方法があれば教えていただきたいです。

該当のソースコード

HTML
1
2<body>
3
4<textarea id="input"></textarea>
5<button onclick="update_field();">出力ボタン</button>
6<p name="text" id="output" rows="20" cols="70" >ここに出力されます</p>
7
8</body>
9

javascript
1
2unction update_field() {
3  text    = document.getElementById("input").value;
4document.getElementById("output").innerHTML = text;
5
6$(function(){
7  var arr1 = [
8
9    /りんご/g,
10    /ドライバー/g,
11
12  ];
13  
14  var arr2 = [
15　  "果物",
16    "工具",
17
18  ];
19
20  $('#output').each(function(){
21    for(var i=0, len=arr1.length; i<len; i++){
22      var txt = $(this).html();
23      $(this).html(
24        txt.replace(arr1[i],
25          '<span class="kaisei">' + arr2[i] + '</span>')
26
27      );
28    }
29  });
30});
31}
32

CSS
1.kaisei {
2  color: #e60012;
3  text-decoration:underline;
4}
5

プログラミング初心者で、至らない点が多く申し訳ありません。
ご回答のほどよろしくお願いいたします。

kei344

2020/05/12 09:40

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

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

回答2件

データ属性を使用して置換前の文字列をspanタグに埋め込むのはいかがでしょうか。
https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes

JavaScript
1txt.replace(arr1[i],
2  '<span class="kaisei" data-before="$&">' + arr2[i] + '</span>')
3// 「$&」は置換対象の文字列

投稿2020/05/12 15:30

編集2020/05/13 04:11

satokei

総合スコア1217

K.Mu

2020/05/13 02:23

回答ありがとうございます。データ属性、初耳でした。必要に応じてデータ属性で元の語句を引っ張ってくるということでしょうか？その方向でも考えてみます。ありがとうございます！

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

ベストアンサー

js
1function update_field() {
2  text = document.getElementById("input").value;
3  document.getElementById("output").innerHTML = text;
4
5  $(function() {
6    var arr1 = [
7
8      /りんご/g,
9      /ドライバー/g,
10
11    ];
12
13    var arr2 = [
14      '<span class="kudamono kaisei">果物</span>',
15      '<span class="kougu kaisei">工具</span>',
16
17    ];
18
19    $('#output').each(function() {
20      for (var i = 0, len = arr1.length; i < len; i++) {
21        var txt = $(this).html();
22        $(this).html(
23          txt.replace(arr1[i],
24            arr2[i])
25
26        );
27      }
28    });
29  });
30}