как обернуть текст после символа

Question

У меня есть эта строка текста

<p>"May you live all the days of your life." — Jonathan Swift</p> 

как обернуть эту часть «- Джонатан Свифт» в пролете, так что результат будет как:

<p>"May you live all the days of your life." <span>— Jonathan Swift</span></p> 

Answer 1

Вы могут использовать String#replace с html() способ.

$('p').html(function(i, v) { 
 
    return v.replace(/\—.*$/, '<span>$&</span>') 
 
});

p span { 
 
    color: green 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>"May you live all the days of your life." — Jonathan Swift</p>

Или с помощью String#substr метод.

$('p').html(function(i, v) { 
 
    var ind = v.indexOf('—'); 
 
    return v.substr(0, ind) + '<span>' + v.substr(ind) + '</span>'; 
 
});

p span { 
 
    color: green 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>"May you live all the days of your life." — Jonathan Swift</p>

Answer 2

насчет положить <br /> тег внутри вашей <p> тега? Полученный код будет:

<p>"May you live all the days of your life." <br />— Jonathan Swift</p> 

Answer 3

Если текст внутри вашего <p> тегов всегда отформатирован в том же точном способе (если все они заканчиваются на — Author Name в конце), то вы можете сделать что-то подобное с JQuery:

$(document).ready(function() { 
    $('p').each(function() { 
    var orgText = $(this).html(); 
    var spanText = orgText.substring(0, (orgText.indexOf('—') -1)) + '<span>' + orgText.substring(orgText.indexOf('—'), orgText.length) + '</span>'; 

    $(this).html(spanText); 
    }); 
}); 

ВНИМАНИЕ: это решение предполагает, что никакой другой — не будет найдено внутри процитировать текст.

См. Мой пример jsfiddle: https://jsfiddle.net/fictus/cL9qgnms/