Превратите все слова внутри элемента DIV в идентификаторы для элемента SPAN
Что я хочу сделать, это повернуть это:
<DIV>One Two Three</DIV>
В это:
HTML
<DIV><SPAN id = "One"></SPAN><SPAN id = "Two"></SPAN><SPAN id = "Three"></SPAN></DIV>
CSS
#One { background-image: url('one.png'); }
#Two { background-image: url('two.png'); }
#Three { background-image: url('three.png'); }
У меня есть пара проблем. Во-первых, я знаю команду RegEx:
\b\w(.*?)+\b
Подберет каждое слово в строке, но непреднамеренно превратит каждый экземпляр DIV в совпадение. Я попытался использовать положительный поиск, чтобы DIV не был обнаружен:
(?<=>)\b\w(.*?)+\b(?=<)
Но в результате «Раз, два, три» превратился в единый матч.
Во-вторых, у меня есть этот код jQuery, который превратит мои критерии соответствия в идентификаторы SPAN.
$("DIV").each(function() {
$(this).html($(this).html().replace(/\b\w(.*?)+\b/gi, "<SPAN id=\"$0\"></SPAN>"));
});
Но затем я нашел ответ Алекса Терпина на , заключающий каждое слово элемента в тег SPAN , и захотел применить это. Это почти сработало: я мог дать каждому слову в строке элемент SPAN, но это не сохраняло параметр id. Чего мне не хватает, чтобы все это работало?
ОБНОВЛЕНИЕ: Anant предоставил многообещающее решение в разделе комментариев. Во время моего теста я столкнулся со странной ошибкой, когда он подбирал все экземпляры строки-заполнителя, которая служила личным напоминанием о замене слова позже. Они выглядят так:
<DIV>
<DIV class = "Something">One Two Three</DIV></DIV>
<DIV>
<DIV class = "Something">TEMP</DIV></DIV>
<DIV>
<DIV class = "Something">TEMP</DIV></DIV>
Когда код был применен, он превратился в это:
<DIV>
<DIV class = "Something"><SPAN style = "background-image: url(one.png)"></SPAN><SPAN style = "background-image: url(two.png)"></SPAN><SPAN style = "background-image: url(threeTEMPTEMP.png)"></SPAN></DIV></DIV>
<DIV>
<DIV class = "Something"><SPAN style = "background-image: url(one.png)"></SPAN><SPAN style = "background-image: url(two.png)"></SPAN><SPAN style = "background-image: url(threeTEMPTEMP.png)"></SPAN></DIV></DIV>
<DIV>
<DIV class = "Something"><SPAN style = "background-image: url(one.png)"></SPAN><SPAN style = "background-image: url(two.png)"></SPAN><SPAN style = "background-image: url(threeTEMPTEMP.png)"></SPAN></DIV></DIV>
Эта ошибка была решена простым удалением всех следов слова TEMP из HTML. Вы также заметите, что код дублирует себя в каждом классе Something. Осталось только, чтобы код принимал каждый экземпляр класса Something по отдельности.
Для решения Alex Turpin вам просто нужно добавить .attr("id", v) при создании диапазона. См.: jsfiddle.net/yr8wt0dg Если у вас не очень строгий/конкретный HTML, не используйте регулярное выражение. В вашем случае используйте .text() вместо .html().
Может быть полезно узнать, почему вы считаете, что вам нужно это сделать. Автоматически сгенерированные идентификаторы обычно никому не нужны; возможно, есть лучший способ сделать то, что, по вашему мнению, это решит (проблема XY).
Мне нужны идентификаторы, чтобы я мог связать их со свойством background-image. Каждое слово связано с файлом изображения (например, one.png для One). Я надеюсь, что этот метод избавит меня от необходимости копировать и вставлять несколько IMG в HTML.
Я бы предложил атрибут data-img='One', а не идентификатор (или, может быть, просто добавить в список классов). Решение будет таким же, но потенциально не будет генерировать повторяющиеся идентификаторы или недействительные идентификаторы.
Почти получилось. В первых двух случаях он получил их правильно. Третий добавил слово, откуда я понятия не имею. Ваш код близок. (Извиняюсь за задержку с ответом, нужно было убедиться, что это не было чем-то с моей стороны.)
Я знаю, почему это происходит. Итак, у меня есть несколько таких DIV в разных группах. В каждый DIV я добавил заполнитель в качестве напоминания о замене этого раздела позже. Оказывается, скрипт подобрал все экземпляры слова-заполнителя. Я обновлю основной пост, чтобы показать, что я имею в виду.
Вот обновленная скрипта с использованием примеров изображений (из другого поста SO): jsfiddle.net/e7o0vm1t
Что касается кода, работающего с большим количеством html, чем предполагалось, - это потому, что у вас есть $("div") - добавьте класс к div, к которому вы хотите применить (<div class='background'>), и измените js на $("div.background") (например) - так что это применимо только к выбранным вами div .
Ответы 2
Вам не хватает регулярного выражения, которое работает:
\S # Match non-whitespace characters.
+ # 1 or more
Кроме того, ваша строка замены должна использовать $&, а не $0:
<span id = "$&"></span>
Попробуйте на regex101.com.
Вот как работает ваше текущее регулярное выражение:
\b # Match a word boundary
\w # then a word character ('a' to 'z', lower or uppercase, '-', or a digit),
( # then groups, each consists of
.*? # 0 or more characters,
)+ # 1 or more
\b # then ends with another word boundary.
Попробуйте на regex101.com, чтобы увидеть разницу между ними.
Попробуй это:
$('div').each(function() {
const currentHTML = $(this).html();
const newHTML = currentHTML.replace(
/\S+/g,
'<span id = "$&"></span>'
);
console.info(currentHTML);
console.info(newHTML);
$(this).html(newHTML);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>One Two Three</div>Примените дополнительный класс к элементам div, где вы хотите выполнить замену:
Проверьте ниже фрагмент кода:
$('div.modify-html').each(function() {
var obj = $(this);
var words = obj.text().split(" ");
obj.empty();
$.each(words, function(i, v) {
var imgSrc = v.toLowerCase() + ".png";
obj.append($("<span style='background-image: url(" + imgSrc + ");'>").text(v));
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class = "something modify-html">One Two Three</div>
</div>
<div>
<div class = "something">TEMP</div>
</div>
<div>
<div class = "something">TEMP</div>
</div>
<div>
<div class = "something modify-html">Four Five Six</div>
</div>
Я не знаю о RegEx, но, может быть, вы можете использовать это?
textContent.trim().split(' ')затем для каждого элемента вы можете создать объект span и добавить его к<div>