Как отсортировать теги HTML по алфавиту в JS?
Привет, у меня проблема, и я не могу найти что-то в Интернете. У меня есть эти теги:
<bratislava>...</bratislava>
<presov>...</presov>
<nitra>...</nitra>
<kosice>...</kosice>
<bardejov>...</bardejov>
и мне нужен простой способ сортировки тегов по алфавиту с помощью javascript. Спасибо.
Обновлено: я не написал подробности: У меня есть эти теги (я их не пишу), их пишет какой-то внешний JS-код, и я хочу, чтобы они были отсортированы по алфавиту.
У меня есть текст в моих html-тегах, и эти теги имеют произвольное имя, и я хочу отсортировать эти теги по алфавиту, нет этого текста, но эти теги, кстати, что имена тегов являются названиями городов в Словакии.
@ Filipko769 Эти теги должны быть отсортированы после загрузки страницы или вы хотите отсортировать их перед отправкой страницы в качестве ответа на запрос? Можете ли вы добавить то, что вы пробовали до сих пор?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Я немного смущен, как вы оказались в этой ситуации? Может быть, вы не пытаетесь сделать это правильно? Чего вы пытаетесь достичь и как вы пришли к таким тегам HTML?
Поскольку это настраиваемые теги, я думаю, вы создаете их перед рендерингом в документе. Я думаю, вы должны отсортировать эти теги перед рендерингом, но я не могу хорошо ответить, пока не узнаю, что здесь происходит.
Вы можете сделать это, извлекая данные из строки тегов с помощью RegExp, а затем сортируя их в нужном порядке, а затем объединяя их для получения результирующей строки. Попробуй это-
const tags = `
<bratislava>...</bratislava>
<presov>...</presov>
<nitra>...</nitra>
<kosice>...</kosice>
<bardejov>...</bardejov>
`;
// Extracting the tags from the string and generate an array like
// [{tagName: 'bratislava', tag: <bratislava>...</bratislava>}]
const tagsArr = [...tags.matchAll(/^<([^>]+).*</\1>/mg)].map(([tag, name]) => ({tagName: name, tag}));
// sort the extracted array by tagName
tagsArr.sort((a, b) => a.tagName > b.tagName ? 1 : -1);
// Finally join them back for getting the sorted tags
const res = tagsArr.map(({tag}) => tag).join("\n");
console.info(res);.as-console-wrapper{min-height: 100%!important; top:0}Если они имеют несколько уровней глубины, это может быть проблемой... в противном случае:
let doc, bod; // for use on other loads
addEventListener('load', ()=>{
doc = document; bod = doc.body;
const all = [...bod.querySelectorAll('*')];
all.sort((a, b)=>{
return a.tagName > b.tagName;
});
for(let n of all){
bod.appendChild(n);
}
}); // end load<bratislava>bratislava</bratislava>
<presov>presov</presov>
<nitra>nitra</nitra>
<kosice>kosice</kosice>
<bardejov>bardejov</bardejov>Вы можете отсортировать нетекстовые узлы и заполнить div отсортированными узлами городов.
var citiesDiv = document.getElementById('cities');
var cities =
Array
.from(citiesDiv.childNodes)
.filter(item => item.nodeName && item.nodeName != '#text')
.sort((a,b) =>
(a.nodeName > b.nodeName) ? 1 : (a.nodeName < b.nodeName) ? -1 : 0
);
cities.forEach(item => item.remove()); // remove sorted elements
while(citiesDiv.firstChild) citiesDiv.firstChild.remove(); // remove other elements
cities.forEach(item => citiesDiv.appendChild(item)); // restore sorted elements<div id=cities>
<bratislava>City of Bratislava<br></bratislava>
<presov>Jurisdiction of Presov<br></presov>
<nitra>Restaraunts found in Nitra<br></nitra>
<kosice>Best Uber drivers in Kosice<br></kosice>
<bardejov>Wedding planners for Bardejov couples<br></bardejov>
</div>
Я думаю, что нам нужно больше деталей. Пример
HTMLбыл бы хорош.