使用JavaScript和HTML5的字符串的特定字中的href

Question

我試圖在HTML頁面中使用li，ul，a和href顯示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