Удалите пробелы до /n в js и поместите их в массив
Я ищу способ поместить все три строки моего HTML в массив, но эти три строки будут разбиты на 3 индекса. Мой массив должен быть массивом длиной 3, со строкой в каждом индексе. Я вижу, что могу добиться этого, изменив порядок моего абзаца, удалив пробелы и сделав их ближе, прямо в html-файле. Поэтому я хотел бы знать, есть ли другие способы использования для этого только JS. Это то, что я делал до сих пор: когда я нажимаю кнопку конвертировать и смотрю журнал консоли, там появляется запутанный массив с более чем тремя индексами и полным пробелов: я хотел бы удалить эти пробелы и иметь только 3 индекса с этими 3 текстовыми строками. Я пробовал обрезку(), но он удаляет только первый индекс, а второй и третий - нет.
//let stringg = document.querySelector('input');
let btn = document.querySelector('button');
let p = document.querySelector('.example-text');
let x = p.innerText.toString();
let y = x.split('\n');
btn.onclick = function(){
console.info(y);
};<p class = "question">4. Write a JavaScript program to convert a
comma-separated value (CSV) string to a
2D array of objects.
</p>
<p class = "example-text" style = "display: none ;">
this,is,text,example
lets,go,try,if,i
can,solve,this issue</p>
<div class = "butt-out">
<button id = "btn-press">convert</button>
</div>Что не так с кодом, который у вас есть? Обратите внимание, что тег <p> на самом деле состоит из 4 строк. Содержимое начинается сразу после закрытия >, поэтому включается первая пустая строка.
Я редактирую свой вопрос, как вы сказали, я ищу способ, используя только js, удалить это пробел сразу после >, и мой массив будет состоять только из этих трех строк. это возможно ?
Удалите пробелы с помощью .trim().
Я знаю, что если я переупорядочу свой html-файл после <p>, я смогу удалить эти пробелы, но я бы хотел сделать это только с помощью js.
удаляется только первая строка, вторая и третья остаются.
Что-то вроде x.split("\n").map(line => line.trim())
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Во-первых, вам не следует настраивать обработчики событий, устанавливая функцию, равную свойству события. Хотя это и законно, это старая методика, имеющая ряд недостатков. Вместо этого используйте современный стандарт element.addEventListener(eventName, callback).
Далее, вся работа, которую должен выполнить обратный вызов, должна выполняться в обратном вызове.
Подробную информацию о вашей проблеме смотрите в комментариях ниже:
const p = document.querySelector('.example-text');
// This is the modern way to set up event handlers:
document.querySelector('button').addEventListener("click", function(){
// First, clean up leading or trailing spaces from the whole string
let x = p.textContent.trim();
// Split the string at newlines into an array, then loop over that array and
// trim each item within the array and return that item into the new array
// returned by the map() function.
let y = x.split('\n').map(function(item){
return item.trim();
});
console.info(y);
});<p class = "question">4. Write a JavaScript program to convert a
comma-separated value (CSV) string to a
2D array of objects.
</p>
<p class = "example-text" style = "display: none ;">
this,is,text,example
lets,go,try,if,i
can,solve,this issue</p>
<div class = "butt-out">
<button id = "btn-press">convert</button>
</div>Теперь, основываясь на том, что вы хотите получить в результате, вы не ищете двумерный массив объектов (это будет массив, вложенный в массив). Вы показали одномерный массив, состоящий из трех строк.
Если вам действительно нужен массив объектов, я подозреваю, что вы ищете это:
const p = document.querySelector('.example-text');
// This is the modern way to set up event handlers:
document.querySelector('button').addEventListener("click", function(){
// First, clean up leading or trailing spaces from the whole string
let x = p.textContent.trim();
// Split the string at newlines into an array, then loop over that array and
// trim each item within the array and return that item into the new array
// returned by the map() function.
let y = x.split('\n').map(function(item,idx){
let obj = {}; // Prepare an object that will be inserted into the array
// Set the key of the new object to the index of the item in the array and
// the value of the key to the array item with spaces trimmed off
obj[idx] = item.trim();
return obj; // Return the new object into the array that will be returned by .map()
});
console.info(y);
});<p class = "question">4. Write a JavaScript program to convert a
comma-separated value (CSV) string to a
2D array of objects.
</p>
<p class = "example-text" style = "display: none ;">
this,is,text,example
lets,go,try,if,i
can,solve,this issue</p>
<div class = "butt-out">
<button id = "btn-press">convert</button>
</div>Моя цель заключалась только в том, чтобы удалить эти пробелы, я пытаюсь решить вопрос (в абзаце P) по частям, пока в конце концов не решу всю проблему. твой первый код, кстати, помоги мне, спасибо
Не могли бы вы отредактировать свой вопрос и показать нам пример ожидаемого результата?