将每个单词包装在一个 html 元素中答案

【问题标题】：Wrap each word in an html element将每个单词包装在一个 html 元素中
【发布时间】：2014-09-07 07:02:50
【问题描述】：

是否有用于获取任何 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
};

});

【问题讨论】：

您为什么要将每个单词都包含在一个元素中？你能展示你的尝试吗？
请在问题中直接包含相关代码。向我们展示您的尝试以及您认为的问题所在。
您将需要依赖字符串操作。 1）获取您的内容 2）按单词拆分（使用正则表达式或仅通过在空格处拆分） 3）将每个单词包装在一个跨度中 4）重新插入您的文档。具体实现将取决于您的应用程序的结构。正如其他评论者所说，一些源代码可以帮助您从 Stack Overflow 中获得更好的答案。
如果您的输入只是字符串，则 ui.utils 包中的高亮过滤器 angular-ui.github.io/ui-utils/#/highlight 就是您要查找的内容。
我对原始问题进行了更新。请注意，html 文档包含一个元素树。

标签： javascript jquery html angularjs

【解决方案1】：

假设您在 Angular 中使用 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>';
   });    
}

还假设元素只包含文本

【讨论】：

【解决方案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);

剩下的大问题是你将如何处理标点符号？ -- 这个留给你自己解决

【讨论】：

【解决方案3】：

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);


  });

});

【讨论】：