JQuery разделить только слова, которые не имеют определенного класса

Question

У меня есть следующая разметка:

<div id ="selectable1">
<span id="layer6">
here are some words that needs to be splited
<span class="good">this should not be splitted<span>
this should be splitted
<span class="good">and this should not be spited<span>
</span>
</div>

Я пытаюсь написать функцию, которая будет разбивать только те слова, которые не имеют класса «хорошо». Я использую это:

var words = $("#selectable1 span.cica").text().split(" ");
var text = words.join("</span><span class='drag col'>  ");
$("#selectable1 span.cica").html("<span class='drag col'>" + text + "</span>");

... но это разделяет все мои слова, и мне нужно, чтобы "хороший" класс не разбивался и не добавлялся в текст var - join.

Я надеюсь, что я хорошо объяснил, что я хочу здесь делать, я знаю, что это может быть спорным.

Спасибо за вашу помощь

Answer 1

Обновление на основе комментариев. Поскольку вы завернуты в промежуток, селектор сходит с ума, сделайте это вместо:

var span = $("#selectable1>span.cica").clone();
span.find(".good").remove();
var words = span.text().split(" ");
var text = words.join("</span><span class='drag col'>  ");

Answer 2

var words = $("#selectable1 span:not(.good)").text().split(" ");
var text = words.join("</span><span class='drag col'>  ");

Это может сработать ...