在Angularjs中掃描DOM的字符串

我正在尋找一種簡單的方法來遍歷Angularjs中給定字符串的DOM（或元素）。如果找到給定的字符串，我想粗體顯示它的文本。因爲我還沒有提出解決方案，所以我覺得我已經過時了。在Angularjs中掃描DOM的字符串

例如

搜索狗應該返回4個結果

<section id="container"> 
    <div> 
    <h2>Dogs are great</h2> 
    <p>They are the best. Everyone should have a dog</p> 
    <div> 
     <p>Cat owners are just confused dog owners</p> 
     <p>What's your doggos name?</p> 
    </div> 
    </div> 
</section> 

<script> 
$scope.search = function(word){ 
    var entireDom = // Get the entire innerText of the <section> 
    if(entireDom.match(word) { 
     // Wrap the string in <strong> tags & update the DOM somehow? 
     // This function should probably be case insensitive 
    } 
} 
<script>

任何意見或建議將是超級有用。謝謝！

來源

2017-08-11 Kurai Bankusu

請參閱[如何從正則表達式替換中排除jpeg名稱？]（https://stackoverflow.com/q/41057212/） – guest271314

這不加區別地應用於邏輯文檔的身體的整個的innerHTML：

document.body.innerHTML = document.body.innerHTML.replace(/(dog)/gi, '<strong>$1</strong>');

我不會做這個與子節點雖然。如果我搜索「div」會發生什麼。如果你想更好地控制哪些節點，你可以做的innerHTML特定節點而已，簡單的例子，對正則表達式替換：

Array.prototype.slice.call(document.body.getElementsByTagName("*")) 
    .forEach(f => { 
    if(f.children.length === 0) f.innerHTML = f.innerHTML.replace(/(dog)/gi, '<strong>$1</strong>') 
    });

在這裏看到：https://jsfiddle.net/kbLvdvh9/

這並不改變DOM。向這些節點添加帶有類的跨度可能會更容易，因此您可以在搜索新單詞或其他內容時關閉高亮度。

來源

2017-08-12 01:30:58 Jorg

感謝Jorg。這是一個完美的解決方案。你能否建議如何在'replace（）'函數中傳遞一個變量作爲第一個參數？使用斜線和'gi'很棘手 –

您需要使用Regexp類，您會在其他地方找到文檔和答案。 – Jorg

在Angularjs中掃描DOM的字符串

回答

相關問題