使用jQuery获取字符串中的第一个单词

Question

我正在尝试找到一个函数，可以将字符串中的第一个单词包装在span标签中。

但不幸的是没有成功。

有人能帮我吗？

非常感谢

Dom

- Dom

Answer 1

一种方法：

$('something').each(function(){
     var me = $(this);
     me.html(me.html().replace(/^(\w+)/, '<span>$1</span>'));
});

^{[ 来源 | 尝试一下 ]}

基本上，对于每一个匹配项（something），你可以用带有 <span>标签的自身第一个单词（$1）替换它。字符集\w 匹配字母、数字和下划线（因此定义了什么是“单词” - 你可能需要另外的定义）。

- jensgram

---

好的回答，如果您的措辞在“文本”字段中，只需确保将目标定为接受HTML标记的内容。 - Mark Schultheiss

@Dom 不客气 :) 关于你在 @Ben 的解决方案中的评论：是的，你需要通过 .each() 方法迭代以便操作多个节点。 - jensgram

如果你正在使用Unicode字符，你可能会发现搜索第一个空格之前的所有内容：/([^\s]+)/ - 但是对于像日语这样的语言，这种方法不起作用。 - Chris

Answer 2

你想知道如何在 jQuery 中实现此功能。我认为你需要使用正则表达式来确切地 添加 span。

以下是一个示例，使用 jQuery 从 DOM 中获取文本，并在使用正则表达式将 span 添加到字符串后，在 DOM 中进行更新。

<div id="container">This is the text</div>
<script type="text/javascript">
jQuery(function($){
    // get the text you want to transform in a variable
    var html = $('#container').html();
    // doing the transformation (adding the span) with a regular expression
    html = html.replace(/^([^\s]*)(.*)/, "<span class=\"first-word\">$1</span>$2");
    // update your text
    $('#container').html(html);

    // or in one line:
    $('#container').html( ('#container').html().replace(/^([^\s]*)(.*)/, "<span class=\"first-word\">$1</span>$2") );
});
</script>

这是您将获得的内容:

<div id="container"><span class="first-word">This</span> is the text</div>

- Ben

---

不幸的是，如果页面上有一个“＃container”，它将把它们更改为相同的HTML。它可以工作，但仅适用于ID。 - Dom

如果 HTML 只包含纯文本，那么这将起作用，但是如果有 HTML 标签，例如 <br> 是“第一个单词”，它就不起作用。 - Gregory R.

Answer 3

(function () { 
    var node = $("div").contents().filter(function () { return this.nodeType == 3 }).first(),
        text = node.text(),
        first = text.slice(0, text.indexOf(" "));

    if (!node.length)
        return;

    node[0].nodeValue = text.slice(first.length);
    node.before('<span>' + first + '</span><br/>');
})(); 

- Inspired Prynce Kaka

Answer 4

var first;
var i=0;
$("p").each(function() {
first = $("p")[i].innerHTML;
$("p")[i].innerHTML = "<span class='first'>" + first.slice(0, first.indexOf(' ')) + "</span>" + first.slice(first.indexOf(' '));
i++;
});

- Faheem