Question

我有以下构造：

<h1>
  <span>
  </span>
</h1>

.... 和

<div id="tourname">Riding trip arround the volcano</div>

现在带有id的div由php函数填充，我希望如此我的h1看起来像这样：

<h1>
   <span>Riding</span>
   trip arround the volcano
</h1>

我设法使用此功能填充h1：

 $("h1").html($("#tourname").html());

但我不知道如何将我的字符串分成两部分并填充一部分进入那个跨度和/ span后面的其余部分

你能提一下吗？

非常感谢

Answer 1

你可以用两种方式做到这一点。 1 - 使用php编写时，可以为第一个单词创建跨度。 2 - 使用jQuery。您可以使用jQuery

查看以下代码

  $(document).ready(function(){
    var text = $("#tourname").html();
    var firstword = text.substr(0,text.indexOf(' ')); // to get the first word 
    var remaining = text.substr(text.indexOf(' ')+1); // remianing words
    var final = '<span>'+firstword+'</span> '+ remaining // combining by adding <span> around the first word
    $("h1").html(final);
  });

Answer 2

使用它：

 var strArr = $("#tourname").html().split(' '); 
 $("h1 span").html(strArr.shift());
 $("h1").append(document.createTextNode(strArr.join(" ")));

这应该有所帮助。另请考虑此fiddle

这仅适用于您的使用。要获得更多文本元素的灵活性，请使用strArr.splice(index, number_of_elements_to_include_in_span); 而不是strArr.shift();

在html中找到第一个单词并替换

2 个答案: