JavaScriptとHTML5を使用している特定の単語のhref

Question

特定の単語（すべてのテキストではない）に対してli、ul、a、およびhrefを使用してHTMLページにvar fruits（配列）のコンテンツを表示しようとしています。 。

例えば、文I want a link hereのために、私は唯一の単語hereのリンクをしたいが、私はどのように行うのか分からない...ここで

コードはこれまでです：

<script> 
// selects the div with an id of placeholder 
var div = document.getElementById('placeholder'); 

// say that fruits contains all your data 
var fruits = ['I want a link here','I want a link here','I want a link here','I want a link here','I want a link here'], 
    ul = document.createElement('ul'); // create an arbitrary ul element 

// loop through the fruits array 
for(var i in fruits) { 
     // create an arbitrary li element 
    var li = document.createElement('li'), 
     content = document.createTextNode(fruits[i]); // create a textnode to the document 
     var link = "http://google.com"; 
     var element = document.createElement("a"); 
     element.setAttribute("href", link); 
     element.innerHTML = fruits[i]; 

    li.appendChild(element); // append the created textnode above to the li element 
    ul.appendChild(li); // append the created li element above to the ul element 
} 

div.appendChild(ul); // finally the ul element to the div with an id of placeholder 
</script> 

FIDDLE

Answer 1

一つの可能​​な解決策

var div = document.getElementById('placeholder'); 

// say that fruits contains all your data 
var fruits = ['I want a link <a href="#">here</a>','I want a link here','I want a link here','I want a link here','I want a link here'], 
    ul = document.createElement('ul'); // create an arbitrary ul element 

// loop through the fruits array 
for(var i in fruits) { 
     // create an arbitrary li element 
    var li = document.createElement('li'), 
     content = document.createTextNode(fruits[i]); // create a textnode to the document 
     var link = "http://google.com"; 
     var element = document.createElement("span"); 

     element.innerHTML = fruits[i]; 

    li.appendChild(element); // append the created textnode above to the li element 
    ul.appendChild(li); // append the created li element above to the ul element 
} 

div.appendChild(ul); // finally the ul element to the div with an id of placeholder 

Fiddle

Answer 2

元のデータ配列を変更しない場合は、使用することができます。

for(var i in fruits) { 
     // create an arbitrary li element 
    var li = document.createElement('li'); 
    var link = "http://google.com"; 
    var content = fruits[i].replace('here', '<a href="'+ link +'">here</a>'); 
    var element = document.createElement("span"); 

    element.innerHTML = content; 

    li.appendChild(element); // append the created textnode above to the li element 
    ul.appendChild(li); // append the created li element above to the ul element 
} 

Fiddle

Answer 3

これは、あなたが提供フィドルで動作します。

// selects the div with an id of placeholder 
var div = document.getElementById('placeholder'); 

// say that fruits contains all your data 
var fruits = ['I want a link here', 'I want a link here', 'I want a link here', 'I want a link here', 'I want a link here'], 
    ul = document.createElement('ul'); // create an arbitrary ul element 

// loop through the fruits array 
for (var i in fruits) { 
    // split words from sentence 
    var fruitWords = fruits[i].split(' '); 
    // select the word you want linked (I selected 'here') 
    var linkWord = fruitWords[fruitWords.length-1]; 
    // reconstruct sentence removing the linked word 
    fruitWords.pop(); 
    fruits[i] = fruitWords.join(' '); 

    // create an arbitrary li element 
    var li = document.createElement('li'), 
    content = document.createTextNode(fruits[i]); // create a textnode to the document 
    var link = "http://google.com"; 

    var element = document.createElement("a"); 
    element.setAttribute("href", link); 
    element.innerHTML = linkWord; 
     li.innerHTML = fruits[i] + ' '; 
    li.appendChild(element); // append the created textnode above to the li element 
    ul.appendChild(li); // append the created li element above to the ul element 
} 

div.appendChild(ul); // finally the ul element to the div with an id of placeholder