Библиотека Javascript для сравнения двух строк html, таких как freecodecamp
У меня есть проект, в котором мы сравниваем исходный код и код, написанный пользователем. Пользователь может кодировать, а затем при нажатии кнопки мы должны сравнить написанный код с исходным кодом.
У меня есть как оригинальный, так и новый код в строке
оригинальный HTML: <html><body style='color:white;background:purple;'></body></html>
новый HTML: <html> <body style = "background:purple;color:white;"> </body> . </html>
Здесь есть 3 вещи, которые нужно иметь в виду
1) Пробел (не должен показывать разницу для пробела)
2) ' и " (не следует сравнивать кавычки, оба допустимы в HTML)
3) Порядок атрибутов (должен показывать разницу только для отсутствующего атрибута, игнорировать порядок атрибутов)
Любые предложения или альтернативное решение будут оценены.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете преобразовать их все в одну форму и сравнить их. Пример:
- убрать все пробелы, вкладки (с одним пробелом)
- заменить все
'на" - атрибут сортировки.
- и какое-то правило, которое вы определили
Пример приветствия для получения атрибута:
var cheerio = require('cheerio');
var yourString = `<html><body attr2='hi' attr1='hello' style='color:white;background:purple;'></body></html>`;
var $ = cheerio.load(yourString);
var yourAttrs = $('body')[0].attribs;
var sorted = {};
Object.keys(yourAttrs).sort().forEach(function(key) {
sorted[key] = yourAttrs[key];
});
console.info(sorted);
@PiyushDhamecha, что вы на самом деле пытались найти? Существует множество библиотек NodeJS для анализа HTML-документов.
Этот код запускается на сервере Nodejs? Попробуйте использовать Cheerio
@Ｈｏｎｇａｒｃда, это в Nodejs
Я создал для вас кодовую ручку, это решит вашу проблему.
https://codepen.io/bearnithi/pen/KEPXrX
const textArea = document.getElementById('code');
const btn = document.getElementById('checkcode');
const result = document.getElementById('result');
let originalHTML = `<html><head>
<title>Hello </title>
</head><body>
<p class = "hello"></p>
</body>
</html>`
btn.addEventListener('click', checkCode);
function checkCode() {
let newHTMLCode = textArea.value.replace(/\s/g,"");
let oldHTMLCode = originalHTML.replace(/\s/g,"");
if (newHTMLCode === oldHTMLCode) {
console.info(true);
result.innerHTML = 'TRUE';
} else {
console.info(false);
result.innerHTML = 'FALSE';
}
}<textarea id = "code">
</textarea>
</br>
<button id = "checkcode">Check Code</button>
<p id = "result"></p>спасибо за код, но проверяет ли он, если атрибуты не в порядке?
Нет, я еще не добавил в него алгоритм сортировки.
Вы знаете, как сортировать атрибуты?