如何用br替换第一个空间？

Question

我有一个字符串

Hello/Greetings My name is Rolf

HTML版本

<ul class="options-list"><li><span class="label"><label for="options_168_1">Hello/Greetings My name is Rolf </label></span></li></ul>

我想要做的是在找到第一个空格后添加一个休息时间（在问候语/问候语之后）或者附上＆＃34; Hello / Greetings＆＃34;在标签......

对我来说唯一的解决方案是JS或一些黑客（如果有的话）CSS（没有找到任何可以帮助我的东西）......

如何通过jQuery完成这个？

Answer 1

如果您希望对所有标签执行此操作，您可以执行以下操作：

$("label").each(function(){
  var $elem = $(this);
  $elem.html($elem.text().replace(' ','<br/>'));
});

否则我会给标签一个id，并做这样的事情：

var $elem = $('#myLabel');
$elem.html($elem.text().replace(' ','<br/>'));

Answer 2

var str = 'Hello/Greetings My name is Rolf';
str.replace(/\s/,'<br>');

Answer 3

因此，您希望使用<span>访问class="label"中包含的文本，您可以使用这样的jQuery：

$('span.label').text()

但是，由于class并不针对一个元素，就像使用id一样，我们需要更加具体。正如我们在您的代码段中看到的那样，span元素位于<li>内，具有相同的逻辑：

$('li span.label').text()

但是，如果不够具体，请考虑<ul> class="options-list"元素，这会给我们带来：

$('ul.options-list li span.label').text()

现在你要替换第一个＆＃39; ＆＃39;您在<br> html元素的文本中找到的（空格字符），只需使用：

$('ul.options-list li span.label').text().replace(" ", "<br />")

现在要使用替换的结果，因为它的html不仅仅是纯文本，我们需要使用html()函数，如下所示：

$('ul.options-list li span.label').html($('ul.options-list li span.label').text().replace(" ", "<br />"));

但是考虑到它并没有具体取代 那个 空间，因为没有id，没有什么关于它，它允许我们确定DOM中的特定span元素，所以这意味着，如果你想在特定的<span>特定于该空间进行更改，你需要使用id

<span id="label">blablabla second line</span>

然后你可以使用这个更清洁的jQuery代码：

$('#label').html($('#label').text().replace(" ", "<br />"));

但要注意：id只能在DOM中出现一次;它的独特

但是如果你不想要，或者不能使用id那么之前我给你的jQuery将替换你所有<ul class="options-list"><li><span class="label"> ... </ul>中找到的第一个空格DOM。

希望它足够清楚：）

Answer 4

这并不完美，但它确实起到了作用：

var str = "Hello/Greetings My name is Rolf";
var brPos = str.indexOf(" ");

str = str.substr(0, 15) + "<br>" + str.substr(16, str.length);