将每个单词包装在一个html元素中 [英] Wrap each word in an html element

问题描述

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

很抱歉以前缺少详细信息。

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

在我的指令I尝试在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（''）; 
} 
.html（text）; 
 element.find（'*'）。contents（）[key] = a; 
}）; 
 $ compile（element.contents（））（scope）; 
}; 
 
返回{
范围：{
扳手：'='
}，
限制：'A'，
链接：linkFn 
}; 
 
}）; 
  

解决方案

试试这个脚本： JSFiddle

  var text = $ .trim（$（'p'）。text（）），
 word = text.split（''），
 str =; 
 $ .each（word，function（key，value）{
 if（key！= 0）{str + =;} 
 str + =< span>+值+< / span>; 
}）; 
 $（'p'）。html（str）; 
  

现在仍然存在的大问题是您要如何处理标点符号？ - 我会把它留给你弄清楚

Is there an algorithm/library for taking any html document, finding all the 'words' (single words) in the document and the wrapping each word inside a span (or any other html element). I am using angularJS framework which has some jQuery restrictions. Still, even with jQuery i cannot seem to get it to work. I used the .contents().filter().wrap() mechanism outlined on the jQuery documentation. However it is only useful when I want to wrap entire lines of text rather than the individual words. This problem is very frustrating and I would truly appreciate some help. Thanks much!

Okay sorry for the lack of details previously.

My application pulls a string from a database. The string is contains html. I created a custom directive named 'spanner' and bound this directive to the html string on the scope like so:

Inside my directive I try to add a span around each word in the html like so:

.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
};

});

解决方案

Try this script: 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);

The big question that remains is how are you going to handle punctuation? -- I'll leave that to you to figure out

这篇关于将每个单词包装在一个html元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！