gpt4 book ai didi

javascript - 如何将文本节点拆分为每个 3 个单词的跨度?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:51:01 32 4
gpt4 key购买 nike

假设我有这个 div:

<div> Let's say these are the words in my div </div>

我知道我可以用这种方式将 div 中的每个单词包装成一个 span

$("div").contents().wrap('<span class="wrapper"/>');
//output: <div><span class="wrapper"> Let's say these are the words in my div</span> </div>

但是,我想实现这一点:

<div>
<span class="wrapper">Let's say these</span>
<span class="wrapper">are the words</span>
<span class="wrapper">in my div</span>
</div>

每个特定数量的单词(本例中:每 3 个单词)要分成一组,每组单词要单独包装。


我首先想到的是:

1)我觉得可以用text()来实现获取字符串和split(' ')它形成一个数组,每个元素包含一个单词,写一个 while 循环来操作数组:

var a = 0;
var b = array.length;
while (a<b) {
array[a] = "<span class="wrapper>" + array[a]";
a +=2;
if (a>b) {
a = b-1;
}
array[a] = array[a] + "</span>";
a++;
}

然后就简单地 .join('')数组形成一个字符串和$("div").html(string) ;


2) 或者我可以在使用 text() 获得后简单地使用正则表达式:

对包含 a word + a space + a word + a space + another word 的表达式进行全局搜索

/(\w+\s+\w+\s+\w+)/g

将它替换为包裹在 span 中的它

<span>$1</span>

html()执行 $("div").contents().eq(2).wrap('<span class="wrapper"/>') 之前的输出对于奇数,如果有的话。


这些是我想出的,我想知道,除了这些还有更好的方法吗?

实现它的最佳方法是什么(最快且需要最少的内存)?

最佳答案

这应该做你想做的:

此处演示:http://jsfiddle.net/UQk7r/

$("div").each(function() {
var out = [];
var words = $(this).text()..trim().split(' ');
for (var i = 0; i < words.length; i += 3) {
out.push('<span class="wrapper">' + words.slice(i, i+3).join(' ') + '</span>');
}
$(this).html(out.join(' '));
});

这是 DOM 版本(没有 jQuery):

此处演示:http://jsfiddle.net/cCege/2/

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var out = [];
var words = divs[i].innerText.trim().split(' ');
for (var j = 0; j < words.length; j += 3) {
out.push('<span class="wrapper">' + words.slice(j, j+3).join(' ') + '</span>');
}
divs[i].innerHTML = out.join(' ');
}

最后,这是一个 DOM + RegEx 版本......这应该是你的最佳表现:

演示:http://jsfiddle.net/Xgm5q/1/

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].innerHTML = '<span class="wrapper">'
+ divs[i].innerText.trim().replace(/(([^\s]+\s+){2}[^\s]+)\s+/g, '$1</span> <span class="wrapper">')
+ '</span>';
}​

关于javascript - 如何将文本节点拆分为每个 3 个单词的跨度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13757531/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com