Удалите пробелы между тегами таблицы
Мне нужно регулярное выражение (или другое хорошее решение), которое будет соответствовать пробелу Только между тегами внутри Таблица. Мое текущее регулярное выражение будет соответствовать пробелам между всеми тегами.
const result = `
<div>
<table class = "foo">
<tr>
<td>
Lorem ipsum
</td>
</tr>
<tr>
<td>
Dolor
</td>
</tr>
</table>
</div>
`.replace(/>\s+</g, '><');
Я хочу добиться этого:
<div>
<table class = "foo"><tr><td>Lorem ipsum</td></tr><tr><td>Dolor</td></tr></table>
</div>
В React я конвертирую строку в элемент JSX. Но когда есть пробельные символы, это выдаст ошибку: текстовые узлы с пробелами не могут отображаться как дочерние элементы <table>. Я не хочу влиять на все остальные элементы вне таблицы.
Если вы пытаетесь минимизировать свой код, есть много готовых минификаторов, используя регулярное выражение для разбора HTML приводит к безумию
Вот несколько ресурсов, которые помогут в этом: i.pinimg.com/originals/f4/e8/35/…, pics.me.me/…, s3.amazonaws.com/websitebeaver/blog/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Объяснение
Это не совсем решение с использованием регулярных выражений, однако я считаю, что на самом деле это более упрощенное решение, не стесняйтесь оставлять отзывы.
С этим решением, учитывая, что вы хотите настроить таргетинг на теги таблиц, я думаю, этого должно хватить?
let words = ['Lorum ipsum', 'Dolor'];
let result = `
<div>
<table class = "foo" id = "demo" style = "">
<tr>
<td>
words[0]
</td>
</tr>
<tr>
<td>
words[1]
</td>
</tr>
</table>
</div>
`;
let newResult = '';
const cleanseString = str => {
const attributes = ['id', 'class', 'style']; // etc ...
str = str.replace(/\s/g, '');
const index = str.replace(/\D/g, '');
const marker = `words[${index}]`;
if (str.indexOf(marker) >= 0) {
str = str.replace(marker, words[index]);
}
attributes.forEach(attr => {
if (str.indexOf(attr) >= 0) {
let start = '',
end = '';
start = str.substring(0, str.indexOf(attr));
end = str.substring(str.indexOf(attr), str.length);
str = start + " " + end;
}
});
return str;
};
result.split("<").forEach(str => {
str = cleanseString(str);
if (str != '') {
if (str.indexOf("/table") >= 0) newResult += "<" + str + '\n';
else if (str.indexOf('table') >= 0) newResult += '\n\t' + "<" + str;
else newResult += "<" + str;
}
});
//console.clear();
console.info(newResult);Хороший! почти готово. Будет выведено <tableclass = "foo"> Я могу попробовать исправить это :)
@BenBesuijen Я обновил свой ответ, я думаю, теперь он работает так, как вы ожидали?
Спасибо за вашу помощь. Я могу использовать твое решение
@BenBesuijen Не беспокойтесь, я рад, что смог помочь! :)
Пробел между Lorem и ipsum исчез. Не то, что нужно.
@Toto для простоты, я немного обновил его ... Никаких огромных изменений, никакой беспорядочной логики, просто простое, легко готовое и минимальное решение IMO для этой проблемы, но спасибо, что указали на это, потому что ни Бен, ни я бы это не заметили! Спасибо! :)
Я видел, что вы хотели исправить эту ошибку - Узлы с пустым текстом не могут отображаться как дочерние элементы <table> - в пакете html-to-react.
Я столкнулся с той же ошибкой - я использую следующее, чтобы исправить ее (где sliced в этом примере в имени строки, содержащей HTML):
// React expect no whitespace between table elements
sliced = sliced.replace(/<table>\s*<thead>/g, "<table><thead>");
sliced = sliced.replace(/<table>\s*<tbody>/g, "<table><tbody>");
sliced = sliced.replace(/<thead>\s*<tr>/g, "<thead><tr>");
sliced = sliced.replace(/<tbody>\s*<tr>/g, "<tbody><tr>");
sliced = sliced.replace(/<tr>\s*<th>/g, "<tr><th>");
sliced = sliced.replace(/<tr>\s*<td>/g, "<tr><td>");
sliced = sliced.replace(/</thead>\s*<tbody>/g, "</thead><tbody>");
sliced = sliced.replace(/</thead>\s*</table>/g, "</thead></table>");
sliced = sliced.replace(/</tbody>\s*</table>/g, "</tbody></table>");
sliced = sliced.replace(/</tr>\s*</thead>/g, "</tr></thead>");
sliced = sliced.replace(/</tr>\s*</tbody>/g, "</tr></tbody>");
sliced = sliced.replace(/</th>\s*</tr>/g, "</th></tr>");
sliced = sliced.replace(/</td>\s*</tr>/g, "</td></tr>");
sliced = sliced.replace(/</tr>\s*<tr>/g, "</tr><tr>");
sliced = sliced.replace(/</th>\s*<th>/g, "</th><th>");
sliced = sliced.replace(/</td>\s*<td>/g, "</td><td>");
Это (с использованием регулярных выражений) предполагает, что это обычный HTML, а не «произвольный» HTML.
и это хрупкое, например это не сработает, если у элементов есть атрибуты
Я вижу, что вы пытаетесь сделать, но могу ли я спросить, почему вы пытаетесь это сделать?