在呈现的网页中选择一个单词的所有实例

Question

我有一个 d3 词云，当点击其中一个词云时会启动一个警告框。我不想启动警报框，而是想在相应的 div 元素 el 中突出显示单击单词的任何匹配实例。

处理程序位于 AngularJs 指令中，因此我在立即关闭中拥有元素的上下文。

.on("click",function(v,i,l){
    console.log(
        el // [div.content ng-scope, ...
        v  // Object {text: "demo", ...
    );
    alert(v.text) // demo
})

我以前在构建搜索框时做过这个，但我丢失了代码并且完全忘记了我是如何做到的。

Answer 1

或者，如果你想使用 AngularJS，你可以使用过滤器和绑定：

Click: 
    <div style="border: red thin solid; width: 100px; padding: 10px;">
        <div ng-repeat="word in words">
            <a ng-click="$parent.selectedWord = word">{{word}}</a>
        </div>
    </div>
Selected:
    <div style="border: red thin solid; width: 100px; padding: 10px;">
        <div ng-repeat="word in words">
            <span ng-bind-html-unsafe ="word | highlightWord : selectedWord"></span>
        </div>
    </div>
Selected Word: {{selectedWord}}

和：

app.controller('MainCtrl', function($scope) {
    $scope.words = [
        "beer",
        "wine",
        "whiskey",
        "vodka",
        "gin",
        "rum"
    ];

    $scope.selectedWord = '';

});

app.filter('highlightWord', function() {
    return function(word, selectedWord) {
        if(word === selectedWord) {
            return '<strong>' + word + '</strong>';
        } else {
            return word
        }
    };
});

http://plnkr.co/edit/v4ueqx?p=preview

注意使用 ng-bind-html-unsafe 以返回未从过滤器中转义的 html。您也可以使用指令来完成此操作。

编辑：

如果你想在文本块中突出显示一个单词，方法非常相似：

Click: 
    <div style="border: red thin solid; width: 100px; padding: 10px;">
        <div ng-repeat="word in words">
            <a ng-click="$parent.selectedWord = word">{{word}}</a>
        </div>
    </div>
Selected:
    <div style="border: red thin solid; width: 100px; padding: 10px;" ng-bind-html-unsafe ="text | highlightWord : selectedWord"></div>
Selected Word: {{selectedWord}}

和：

app.controller('MainCtrl', function($scope) {
    $scope.words = [
        "beer",
        "wine",
        "whiskey",
        "vodka",
        "gin",
        "rum"
    ];

    $scope.selectedWord = '';

    $scope.text = "blah blah beer blah blah blah wine blah blah blah whiskey blah blah blah vodka blah blah blah blah blah gin blah blah blah blah blah rum blah blah blah blah beer blah blah blah blah vodka blah blah blah vodka blah blah blah blah blah blah vodka blah blah blah blah";

});

app.filter('highlightWord', function() {
    return function(text, selectedWord) {
        if(selectedWord) {
            var pattern = new RegExp(selectedWord, "g");
            return text.replace(pattern, '<span class="highlighted">' + selectedWord + '</span>');
        } else {
            return text
        }
    };
});

http://plnkr.co/edit/wtxZme?p=preview