在html元素中包装每个单词

Wrap each word in an html element

本文关键字：单词 包装 html 元素      更新时间：2023-09-26

是否有一种算法/库用于获取任何html文档，在文档中找到所有的'单词'(单个单词)，并在span(或任何其他html元素)内包装每个单词。我使用的是angularJS框架，它有一些jQuery限制。尽管如此，即使使用jQuery，我似乎也无法让它工作。我使用了jQuery文档中概述的.contents().filter().wrap()机制。然而，只有当我想换行整行文本而不是单个单词时，它才有用。这个问题非常令人沮丧，我真的很感激你的帮助。谢谢!

好的，很抱歉之前没有详细说明。

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

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

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

试试这个脚本: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);

剩下的大问题是你将如何处理标点符号?

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

  });
});

假设你在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>';
   });    
}

也假定元素只包含文本

相关文章：