文中の単語ごとにリンクを設定するにはどうすればよいですか？

Question

私の質問を説明するための最良の方法は例を使用している：あなたがメインのコンテンツ内の各単語を置くと

https://www.priberam.pt/DLPO/casa

、それは「推移」という言葉の意味についてはリンクを指します。各単語をリンクにするように設定し、すべてのリンクをその "意味"に照会することは可能ですか？

私は、すべての単語を "ページ"へのリンクに変換する機能は問題ありません。

は、これは、我々がしようとしてきたものです：

var link = /wordToReplace/gi; 
var urlLink = 'https://www.priberam.pt/DLPO/wordToBeReplaced'; 
var newLink = urlLink.replace(wordToBeReplaced, 'wordToReplace'); 

ありがとう！

Answer 1

特定のクラスを持つ各要素をホバーすると、タグ内にhtmlコンテンツが表示され、コンテンツと共に情報層を表示する追加のクラスを追加する定義を検索する関数を記述する必要がありますあなたのJSは（単語の意味）を注入します。

• これを達成するためにJSスクリプトが行う必要があるすべてのステップを決定するために、擬似コードを書き始めるでしょう。
• 次に、この機能をトリガーするためにJSが探しているものと同じクラスのスパンタグを各単語が持つようにHTMLを設計します。段落を配列に分割し、配列の内容をページに戻す前に各配列の値にspanタグを追加する別のJS関数を記述することができます。
• HTMLを作成したら、前に書いた擬似コードの後に​​ホバー機能を記述します。
• 最後に、JSがCSSでDOMに注入しているコードのスタイルを変更します。

jQueryでかなりうまくいけば、これを数時間で済ませることができますが、個人的にはバニラのJavaScriptを使用します。これは学習経験のようですが、時間がかかります。

Answer 2

次の例のようなものですか？

var textToConvert = 'Words to be converted to links'; 
 
var lookupUrl = 'http://www.merriam-webster.com/dictionary/'; 
 

 
var convertedText = textToConvert.replace(
 
    /(\w+)/g, 
 
    '<a href="' + lookupUrl + '$1">$1</a>' 
 
); 
 

 
document.getElementById('output').innerHTML = convertedText; 
 
console.log(convertedText);

<p id="output"></p>