在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的字符串

回答

相关问题