Question

是否存在用于获取任何html文档的算法/库，查找文档中的所有“单词”（单个单词）以及将每个单词包装在span（或任何其他html元素）中。我正在使用angularJS框架，它有一些jQuery限制。尽管如此，即使使用jQuery，我似乎无法让它工作。我使用了jQuery documentation上概述的.contents（）。filter（）。wrap（）机制。但是，只有当我想要整行文本而不是单个单词时，它才有用。这个问题非常令人沮丧，我真的很感激一些帮助。非常感谢！

很抱歉以前缺乏细节。

我的应用程序从数据库中提取字符串。该字符串包含html。我创建了一个名为'spanner'的自定义指令，并将此指令绑定到作用域上的html字符串，如下所示：

在我的指令中，我尝试在html中的每个单词周围添加一个范围，如下所示：

.directive('spanner', function($compile){
var linkFn = function(scope, element, attributes)
{
    element.append(scope.spanner);
    angular.forEach(element.find('*').contents(), function(val, key){
        var a = angular.element(val);
        var text;
        if(a.context.nodeType === 3)
        {
            text = a.text();
            text = text.split(' ');
            angular.forEach(text, function(val, key){
                if(key%2 === 0){
                    val = "<span class='even'>" + val + "</span>";
                }
                else
                {
                    val = "<span ng-class='odd'>" + val + "</span>";
                }
                text[key] = val;
            });

            text = text.join(' ');              
        }
        a.html(text);
        element.find('*').contents()[key] = a;            
    });
    $compile(element.contents())(scope);
};

return {
    scope: {
        spanner: '='
    },
    restrict: 'A',
    link: linkFn
};

});

Answer 1

http://jsbin.com/xudis/1/edit

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope){
 var str = "How are you doing today?";
var res = str.split(" "); 

  angular.forEach(res, function(word){

    word = "<span>" + word + "<span>";
    console.log(word);


  });

});

Answer 2

试试这个脚本： JSFiddle

var text = $.trim($('p').text()),
    word = text.split(' '),
    str = "";
$.each( word, function( key, value ) {
  if(key != 0) { str += " "; }
  str += "<span>" + value + "</span>";
});
$('p').html(str);

剩下的一个大问题是你如何处理标点符号？ - 我会留给你弄清楚

Answer 3

假设您在角度中使用jQuery并且这在指令中完成，可以执行以下操作：

link: function( scope, elem, attrs){
  elem.html(function( _, original){
       var words = original.split(' ');
       return '<span class="wrap">' + words.join('</span><span class="wrap">') +'</span>';
   });    
}

还假设元素仅包含文本

在html元素中包装每个单词

3 个答案: