href in einem bestimmten Wort der Zeichenfolge mit JavaScript und HTML5

Question

Ich versuche, den Inhalt von var fruits (Array) in einer HTML-Seite mit li, ul, a und href für ein bestimmtes Wort (nicht den gesamten Text) zu zeigen .

Zum Beispiel für den Satz I want a link here Ich mag den Link nur für das Wort here aber ich weiß nicht, wie es zu tun ...

Hier ist der Code so weit:

<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

Eine mögliche Lösung

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

Wenn Sie das ursprüngliche Datenarray nicht ändern möchten, können Sie es verwenden.

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

Das in der Geige arbeitet Sie zur Verfügung gestellt.

// 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