Как сломать конец строки внутри <td> в <table> с помощью jquery/javascript?
У меня есть таблица как:
$(document).ready(function() {
var enteredText = document.getElementById("textArea").value;
var numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
var characterCount = enteredText.length + numberOfLineBreaks;
alert('Number of breaks: ' + numberOfLineBreaks);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table class = "tapshil" id = "" border = "2px" width = "100%">
<thead>
<tr>
<th> <font face = "preeti">l;=g+=</font></th>
<th><font face = "preeti"> k|=b=g</font></th>
<th><font face = "preeti"> ldlt</font></th>
<th><font face = "preeti"> eG;f/ dx;'n tyf hl/jfgf</font> </th>
<th><font face = "preeti"> cGtMz'Ns</font></th>
<th><font face = "preeti"> d"=c=s/ </font></th>
<th><font face = "preeti"> hDdf dx;'n</font> </th>
<th><font face = "preeti"> hDdf </font> </th>
</tr>
</thead>
<tbody>
<!-- put loop here -->
<tr>
<td>1</td>
<td>11
1212231
</td>
<td id = "textArea">भैरवा भन्सार 2070-01-01 2072-01-01 बिराटनगर भन्सार 2070-01-01 2072-01-01
</td>
<td>3</td>
<td>7</td>
<td>11</td>
<td>15</td>
<td id = "totalOfAll">36</td>
</tr>
</tbody>
</table>
</body>
</html>В моем пользовательском интерфейсе это выглядит как:
В моей таблице есть одни данные, поступающие как:
<td id = "textArea">भैरवा भन्सार 2070-01-01 2072-01-01 बिराटनगर भन्सार 2070-01-01 2072-01-01
</td>
Я хочу разделить после भैरवा भन्सार 2070-01-01 2072-01-01 и перевести बिराटनगर भन्सार 2070-01-01 2072-01-01 в новую строку, но он не приходит. В моем интерфейсе он идет по прямой. Как я могу разбить его на новую строку? Я хочу, чтобы мой вывод был таким:
<td id = "textArea">भैरवा भन्सार 2070-01-01 2072-01-01
बिराटनगर भन्सार 2070-01-01 2072-01-01
</td>
И кстати, просто присвоение случайному элементу идентификатора textarea не делает его фактическим элементом textarea. У вас здесь не текстовое поле, а ячейка таблицы, поэтому нет свойства value, которое вы могли бы прочитать, чтобы получить содержимое. Изучите, как правильно получить доступ к текстовому содержимому ячейки таблицы.
Вы можете использовать свойство CSS word-break, чтобы разбить слово.
Вы не можете использовать document.getElementById("textArea").value на <td>, поскольку на самом деле он не имеет значения. Вы можете использовать его в полях формы. Чтобы получить HTML внутри <td>, используйте document.getElementById("textArea").innerHTML
добавьте сюда код цикла. Я считаю, что это не должно быть жестко закодированное значение. И вы не можете иметь один и тот же идентификатор несколько раз, ваш код не будет работать, вместо этого используйте класс.
почему бы вам просто не добавить разрыв строки в то, что когда-либо отображало этот вывод? это кажется самым простым решением, а не пытаться взломать рендеринг с помощью JS.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я предлагаю не форматировать текст с помощью Javascript/JQuery, а форматировать его во время рендеринга.
Предполагая, исходя из вашего примера, что у вас есть фиксированный формат (показан ниже) текста, отображаемого в вашем теге <td>, вы можете проанализировать текст с пробелом (' ') и отформатировать его в соответствии с вашими требованиями к отображению.
Fixed format: firstName lastName Date1 Date2 firstName lastName Date1 Date2 ...
Решение:
<script>
$(document).ready(function() {
var enteredText = $("#textArea").html(); //Get the InnerHTML
var NumOfOccurrences = (enteredText.match(/\s/g) || []).length; //All the occurrences of space (' ')
var n = 3; //Initial occurrence
while(n <= NumOfOccurrences) {
enteredText = enteredText.replace(RegExp("^(?:.*? ){" + n + "}"), function(val){return val.replace(RegExp(' ' + "$"), "<br>")}); //Replace the occurrence
n = n+ 2; //Increment by 2 to determine next occurrence
}
$("#textArea").html(enteredText); //Replace the InnerHTML
});
</script>
Вывод должен быть भैरवा भन्सार 2070-01-01 2072-01-01 в одной строке и в другой строке बिराटनगर भन्सार भन्सार भन्सार 2070-01-01207 date is new date date text format: 2070-01-01207
если вы можете помочь мне, помогите мне, пожалуйста
это не идет, как я сказал :(
В чем проблема, которую вы видите? Я попробовал это, и это сработало для меня. Не с именами Hindi, а с именами English.
все в порядке, братан, мне удалось это сделать, тебе нужно сделать n = 5 и n = n + 5, спасибо
я отредактировал заголовок извините