2016-10-26 4 views
0

내 질문을 설명하는 가장 좋은 방법 것은 예를 사용한다 : 메인 컨텐츠 내에서 각 단어를 가져 가면문장의 각 단어에 대한 링크를 설정하려면 어떻게해야합니까?

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

, 그것은 "공중 선회"단어의 의미에 대한 링크를 의미한다. 각 단어가 링크로 전환되도록 구성 할 수 있으며 모든 링크를 해당 "의미"로 참조 할 수 있습니까?

모든 단어를 "페이지"에 대한 링크로 바꾸는 기능은 괜찮을 것이라고 생각합니다.

이것은 우리가 노력했습니다 것입니다 :

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

감사합니다!

+2

질문 https://blog.stackoverflow.com/2014/09/introduction-runnable-javascript-css-and-html-code-snippets /). [Minimal, Complete, Verifiable example]을 만드는 방법을 참조하십시오 (http://stackoverflow.com/help/mcve). – andreas

답변

0

특정 클래스가있는 각 요소를 가리키면 태그 안에 html 콘텐츠가 표시되고 콘텐츠가있는 정보 레이어를 표시하는 추가 클래스가 첨부 된 정의를 검색하는 기능을 작성해야합니다 JS가 (단어의 의미) 삽입합니다.

  • 이렇게하려면 JS 스크립트가 수행해야하는 모든 단계를 결정하기 위해 의사 코드로 작성을 시작합니다.
  • 그러면 각 단어에이 함수를 트리거하기 위해 JS가 찾고자하는 클래스와 동일한 클래스가 포함되도록 HTML을 디자인 할 것입니다. 별도의 JS 함수를 작성하여 단락을 배열로 분할 한 다음 배열 내용을 페이지에 다시 배치하기 전에 각 배열 값에 span 태그를 추가 할 수 있습니다.
  • 일단 HTML을 작성하면 이전에 작성한 가상 코드에 따라 마우스를 올려 놓을 수 있습니다.
  • 마지막으로 JS가 CSS로 DOM에 삽입하는 코드의 스타일을 지정합니다.

jQuery를 사용하는 것이 좋으면 몇 시간 안에 처리 할 수 ​​있지만 개인적으로는 바닐라 자바 ​​스크립트를 사용하는 것이 좋습니다. 학습 경험이있는 것 같지만 시간이 오래 걸립니다.

0

아래의 예와 비슷한가?

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>

바람직 [스택 발췌문 (에서 ** 질문 자체 ** 재현하는 데 필요한 가장 짧은 코드를 포함해야하는 코드의 도움을 구하고
관련 문제