将一个html内容的每个单词包装在一个区域中 [英] Wrap each word of a html content in a span

问题描述

我无法用span来包装html内容的每个单词，并保留其他标记。

例如，如果我的代码示例是

< p>< b> Lorem ipsum dolor sit amet< / b>< br /> < a href =＃> consectetur< / a> adipiscing elit。 Nam nec scelerisque nisl，vitae mattis diam。 < / p>

我试图做的是（代码也保留其他元素） $ b

 < p>< b>< span class =sc> Lorem< / span> < span class =sc> ipsum< / span> < span class =sc> dolor< / span> < span class =sc> sit< / span>< / b>< br /> < span class =sc> amet< / span> < a hre =>< span class =sc> consectetur< / span>< / a> < span class =sc> adipiscing< / span> < span class =sc> elit。< / span> < span class =sc> Nam< / span> < span class =sc> nec< / span> < span class =sc> scelerisque< / span> < span class =sc> nisl，< / span> < span class =sc>简历< / span> < span class =sc> mattis< / span> < span class =sc> diam。< / span> < span class =sc> Proin< / span> < span class =sc> fermentum< / span> < span class =sc> lorem< / span> < / span>< span class =sc> < span class =sc> interdum< / span> < span class =sc> porttitor。< / span>< / p> 
  

我从下面的Js代码中得到的是

 < p>< span class =sc> Lorem< / span> < span class =sc> ipsum< / span> < span class =sc> dolor< / span> < span class =sc>坐下< / span> < span class =sc> amet< / span> < span class =sc> consectetur< / span> < span class =sc> adipiscing< / span> < span class =sc> elit。< / span> < span class =sc> Nam< / span> < span class =sc> nec< / span> < span class =sc> scelerisque< / span> < span class =sc> nisl，< / span> < span class =sc>简历< / span> < span class =sc> mattis< / span> < span class =sc> diam。< / span> < span class =sc> Proin< / span> < span class =sc> fermentum< / span> < span class =sc> lorem< / span> < / span>< span class =sc> < span class =sc> interdum< / span> < span class =sc> porttitor。< / span>< / p> 
  

正如你所看到的，我放弃了< b>< / b>，< br />

我的Java脚本代码

< a />

  var articleContent =; 
 var totalWords = 0; 
 $（＃content）。find（'p'）。each（function（）{
 var text = $（this）.text（）。split（''）; 
 for（var i = 0，len = text.length; i  text [i] ='< span class =sc>'+ text [i] +'< ; / span>'; 
} 
 totalWords = totalWords + i; 
 articleContent = articleContent +< p>+ text.join（''）+< / p> ; 
}）; //每个结尾，
 console.log（articleContent）; 
  

下面是相同的小提琴 JSfiddle

如何在保存其他标记的范围中包装每个单词？
$ b

我们可以假设我的HTML代码只包含< b> < / BR>

解决方案

试试

  $（'p'）
 .find（'*'）
 .addBack（'p'）
 .each function（）{
 $ b $ textNode = $（this）.contents（）。filter（function（）{
 return this.nodeType === 3; //Node.TEXT_NODE $ b $ （），
替换=''; 
 
 $。 （index，value）{
 if（value.replace（/ \ s + /，））{//删除空格
替换+ ='< span class =wraped>' + value +'< / span>'; 
} 
}）; 
 
 textNode.replaceWith（$（replace））; 
 
} ）; b 
 
 
 $ b 
 >  JSFiddle   
 
I'm not able to wrap each word of a html content with a span, keeping other markup as well.

For example,If my code sample is 

<p><b>Lorem ipsum dolor sit amet</b><br/> <a href="#">consectetur</a> adipiscing elit. Nam nec scelerisque nisl, vitae mattis diam. Proin fermentum lorem in interdum porttitor.</p>

What I'm trying to do is (code which retains other elements as well)
<p><b><span class="sc">Lorem</span> <span class="sc">ipsum</span> <span class="sc">dolor</span> <span class="sc">sit</span></b><br/> <span class="sc">amet</span> <a hre=""><span class="sc">consectetur</span></a> <span class="sc">adipiscing</span> <span class="sc">elit.</span> <span class="sc">Nam</span> <span class="sc">nec</span> <span class="sc">scelerisque</span> <span class="sc">nisl,</span> <span class="sc">vitae</span> <span class="sc">mattis</span> <span class="sc">diam.</span> <span class="sc">Proin</span> <span class="sc">fermentum</span> <span class="sc">lorem</span> <span class="sc">in</span> <span class="sc">interdum</span> <span class="sc">porttitor.</span></p>
What I'm getting out of below Js code is
    <p><span class="sc">Lorem</span> <span class="sc">ipsum</span> <span class="sc">dolor</span> <span class="sc">sit</span> <span class="sc">amet</span> <span class="sc">consectetur</span> <span class="sc">adipiscing</span> <span class="sc">elit.</span> <span class="sc">Nam</span> <span class="sc">nec</span> <span class="sc">scelerisque</span> <span class="sc">nisl,</span> <span class="sc">vitae</span> <span class="sc">mattis</span> <span class="sc">diam.</span> <span class="sc">Proin</span> <span class="sc">fermentum</span> <span class="sc">lorem</span> <span class="sc">in</span> <span class="sc">interdum</span> <span class="sc">porttitor.</span></p>
As you can see I'm loosing the <b></b>, <br/> <a/> tag markups in my output.

My Javacript code,
var articleContent = "";
var totalWords = 0;
$("#content").find('p').each(function(){
    var text = $(this).text().split(' ');
    for( var i = 0, len = text.length; i<len; i++ ) {
        text[i] = '<span class="sc">'+text[i]+'</span>'; 
    }
    totalWords = totalWords + i;            
    articleContent = articleContent + "<p>"+text.join(' ')+"</p>";
});//End of each ,
console.log(articleContent);
Here is the fiddle for the same JSfiddle

How to wrap each word in a span keeping other markup as well ?

We can assume that my HTML code my contain only <b> </br> <a> as other elements.
解决方案
try
$('p')
    .find('*')
    .addBack('p')
    .each(function () {

        textNode = $(this).contents().filter(function () {
           return this.nodeType === 3; //Node.TEXT_NODE
        });

        text = textNode.text().split(' ');
        replace = '';

        $.each(text, function (index, value) {
            if ( value.replace(/\s+/, "") ) {   // Remove whitespaces
               replace += '<span class="wraped">' + value + '</span>';          
            }
        });

        textNode.replaceWith( $(replace) );

    });
JSFiddle

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