Javascript - заменить все пробелы с HTML-теги вложить оставшиеся слова

Question

У меня есть этот <div>:

<div id="myDiv"> 
orange green, yellow 
magenta/23 black: "brown" 
</div> 

Я хочу, чтобы заменить все пробелы с HTML-теги вложить оставшиеся слова,
, например (<b> теги):

<div id="myDiv"> 
<b>orange</b><b>green,</b><b>yellow</b> 
<b>magenta/23</b><b>black:</b><b>"brown"</b> 
</div> 

есть ли способ сделать с ним в JavaScript или JQuery?

Answer 1

Другой способ

$('#myDiv').html(function (i, html) { 
    return '<b>' + html.trim().replace(/(\s+)/g, '</b>$1<b>') + '</b>' 
}) 

Demo: Fiddle

Answer 2

Не тестировался, укусил это должно работать

var myDiv = document.querySelector('#myDiv'); 

myDiv.innerHTML = myDiv.innerHTML.split(' ').map(function(word){ 
    return "<b>"+word+"</b>"; 
}).join(''); 

Answer 3

Простой JS подход:

var words = document.getElementById('myDiv').innerHTML.split(' '); 
var output = ""; 
for(var i = 0; i < words.length; i++) { 
    output += '<b>' + words[i] + '</b>'; 
} 

document.getElementById('res').innerHTML = output; 

посмотреть здесь: http://jsfiddle.net/4dnp3t81/

Answer 4

Здесь мое решение. Я помещаю вывод в тег xmp, чтобы вы могли видеть результат.

var myDiv = $("#myDiv").html(); 
 
$('#output').html(myDiv.replace(/\s*(.+?)\s/g, "<b>$1</b>"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myDiv"> 
 
orange green, yellow 
 
magenta/23 black: "brown" 
 
</div> 
 
<xmp id="output"></xmp>