從列表中查找單詞並將每個單詞放在一個範圍中？

我想動態檢查一個段落的單詞列表，然後將這些單詞包裹在span標籤中（如果找到）。從列表中查找單詞並將每個單詞放在一個範圍中？

例子：

<p class="para"> 
My house is red and my front door is blue. 
</p>

我怎麼能檢查的話「家」，「紅」，「門」和「藍」，以及任何其他我可能會添加到段落，並然後將它們包裹在一個簡單的span標籤中，然後我可以使用CSS進行樣式設計？

我搜索並找到了單個詞的答案，但作爲一個完整的新手我不知道如何檢查我可以添加到它們的列表。

來源

2017-07-15 Jerpl

您是否至少試圖修改您找到的適合您需求的答案之一？你自己的任何嘗試？ – NewToJS

JavaScript有很大的正則表達式 - 您可以使用這些。

var words = ['house', 'red', 'door', 'blue']; 
    // create a regular expression matching any of these words, using 'g' flag to match all instances 
    var regexp = new RegExp('(' + words.join('|') + ')', 'ig'); 

    $('p.para').each(function(num, elem) { 
     var text = $(elem).text(); 
     // use string.replace with $& notation to indicate whatever was matched 
     text = text.replace(regexp, '<span class="$&">$&</span>'); 
     $(elem).html(text); 
    });

這將會把所有的單詞跨度匹配名稱，前<span class="house">house</span>。只需將第一個'$ &'替換爲某個預定義的類，就可以爲每個類創建相同的類。

來源

2017-07-15 20:49:57 arbuthnott

請注意，這會從受影響的段落中刪除任何以前的html格式。 – arbuthnott

謝謝。這是我正在尋找的。是否有辦法檢查單詞，而不考慮大寫或小寫字母？ – Jerpl

@Regulator的@Jerpl'i'標誌意味着不區分大小寫。 –

function wrapWithSpan(str){ 
    var outerDom = $('p.para'); 
    outerDom.html(outerDom.html().replace(RegExp(str,'ig'), '<span>' + str + '</span>')) 
}

，或者如果你有一個數組，你可以試試這個

function wrapWithSpan(strArr){ 
    var outerDom = $('p.para'); 
    outerDom.html(outerDom.html().replace(RegExp(strArr.join('|'),'g'), 
    function(token){ 
     return '<span>' + token + '</span>'; 
    }); 
}

來源

2017-07-15 20:41:21

可能的解決方法。

const words = ['house', 'red', 'door', 'blue']; 
 
let elem = document.querySelector('.para'); 
 

 
elem.innerHTML = elem.textContent.split(' ').map(v => { 
 
    return words.indexOf(v) > -1 ? `<span class='r'>${v}</span>` : v; 
 
}).join(' ');

.r { 
 
    color: blue; 
 
}

<p class="para"> 
 
    My house is red and my front door is blue. 
 
</p>

來源

2017-07-15 20:43:25

我給了一個很好的javascript-only演示，沒有jQuery。

https://jsfiddle.net/66hujh1e/

(function() { 
 
    var paragraph = document.getElementsByClassName('para')[0]; 
 
    var text = paragraph.innerHTML; 
 

 
    var wordArr = text.split(' '); 
 
    text = []; 
 
    wordArr.forEach(function(el) { 
 
    \t if(el === 'house' || el === 'red') 
 
    \t el = '<span class="matched">' + el + '</span>'; 
 
    text.push(el); 
 
    }); 
 
    console.log(text); 
 
    text = text.join(' '); 
 
    paragraph.innerHTML = text; 
 
})()

.matched { 
 
    background-color: red; 
 
    font-weight: bold; 
 
}

<p class="para"> 
 
My house is red and my front door is blue. 
 
</p>

基本上，你只是想要得到的文本，將它和處理它，然後把它重新走到一起，並指派回爲節點文本。有更多優雅的方法來使用正則表達式等等，但是基於低級理解，我認爲這說明邏輯更好一點。

來源

2017-07-15 21:10:47 Araymer

從列表中查找單詞並將每個單詞放在一個範圍中？

回答

相關問題