Javascript-форум - Удаление последней буквы и добавление в начало слова

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Удаление последней буквы и добавление в начало слова (https://javascript.ru/forum/events/78610-udalenie-poslednejj-bukvy-i-dobavlenie-v-nachalo-slova.html)

Удаление последней буквы и добавление в начало слова

Есть задание написать прогу, которая изменяет строку 'Всем привет' каждые 100 мс, удаляя одну букву с конца строки и добавляя удаленную букву к началу строки.Я смог только написать код для удаления буквы с конца.Как теперь ее добавить в начало используя цикл?

<html>
<head>
</head>
<body>
<script type="text/javascript"> 
var str = "Всем привет";
var del = str.substring(0, str.length - 1);
var newstr = str.replace
alert(del);
</script> 
</body>

<div class="rotate"></div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const obj = { text: 'Всем привет' }
    const rotateEl = document.querySelector('.rotate')
    setInterval(
      () => rotateEl.innerText = obj.text = obj.text[obj.text.length - 1] + obj.text.slice(0, -1),
      100
    )
  })
</script>

А зачем цикл, или задача развернуть строку?

А, бегущая строка, тогда по идее надо пробел добавить.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
       font-size: 2em;
  }

  </style>
  <script>
   addEventListener('DOMContentLoaded', function() {
   let str = 'Всем привет ',
   elem = document.querySelector('div'),
   timer = () => {
       let [...a] = str;
       elem.textContent = str = a.pop() + a.join('');
       setTimeout(timer, 100)
   };
   timer()
     });
  </script>
</head>

<body>
<div></div>

</body>
</html>

Вроде бы не арабы и двигать надо в обратном направлении. :)

Цитата:

Сообщение от laimas

Вроде бы не арабы

С арабским текстом код от рони не работает. Оно тоже не в ту сторону идёт и разбивка на символы также отделяет диакритические знаки. В общем этот скрипт вообще не правильно работает, он не правильно обрабатывает испанские, еврейские, маратхи и пр. тексты. В русском языке буквы Ё и Й могут быть не в нормализованном виде. Хотя и существует метод normalize у строк, большинство символов не могут быть нормализованы, поскольку лигатурное начертание является единственно возможным. Также это относится и к эмоджи, флагам, и пр.

Вот, к примеру от рони добавил некоторые тексты, чтобы было видно проблему...

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		p {
			font-size: 2em;
		}
	</style>
	<script>
		addEventListener("DOMContentLoaded", () => {
			const ps = document.querySelectorAll("p");
			(function timer() {
				for(const p of ps) {
					const [...a] = p.textContent
					p.textContent = a.pop() + a.join('')
				}
				setTimeout(timer, 100)
			})();
		});
	</script>
</head>

<body>
	<p>اَلسَّلَامُ عَلَيْكُمْ </p>
	<p>שלום עליכם </p>
	<p>שָׁלוֹם עֲלֵיכֶם </p>
	<p>Head ööd! Tere päevast! </p>
	<p>اَلسَّلَامُ عَلَيْكُمْ‎ </p>
	<p>Ñoño Yáñez come ñame en las mañanas con el niño. </p>
</body>
</html>

Как видите, это весьма странно, поскольку в некоторых языках мы не можем отрывать составные части от слова!

#funfact

Цитата:

Сообщение от laimas

А, бегущая строка, тогда по идее надо пробел добавить.

У меня это плохо сравнивается с такой строкой, например, на автобусе это не так выглядит, вот соорудил, похожее на бегущую строку... Бегущая строка, которая работает правильно на любом языке... а также с эмоджи и флагами и составными символами...

<text-display text="שלום עליכם" lang="he"></text-display>
<text-display text="Hello world!"></text-display>
<text-display text="اَلسَّلَامُ عَلَيْكُمْ‎" lang="ar"></text-display>

<style>

text-display {
	background: radial-gradient(closest-side at center, transparent 30%, black 65%) center / 0.055em 0.055em;
	background-color: #111;
	color: transparent;
	font: 900 5em / 1.5 monospace, system-ui;
	border: 0.1em solid black;
	text-shadow: 0 0 #fdf609, 0 0 0.05em #de1b08, 0 0 0.1em #de1b08;
	display: flex;
	overflow: hidden;
	white-space: nowrap;
}

text-display::before, text-display::after {
	content: attr(text) "\a0";
	min-width: 100%;
	will-change: transform;
	animation: text-display 15s linear infinite;
	animation-direction: inherit;
	flex: 1 0 auto;
	text-align: center;
	mix-blend-mode: color-dodge;
}

:lang(ar), :lang(he) {
	animation-direction: reverse;
}

@keyframes text-display {
	to {
		transform: translateX(-100%);
	}
}

</style>

Цитата:

Сообщение от Malleys

С арабским текстом код от рони не работает

Да вряд ли автору он и нужен, а вот то что направление движения для нашего языка "в арабскую" сторону, это странно. :)

Цитата:

Сообщение от laimas

Да вряд ли автору он и нужен

Даже если ему и не нужна такая письменность, это не значит, что решение должно ломаться при первом же случае. Что мешает сразу рассмотреть общий случай и решить его?

Общее решение позволяет больше не заморачиваться над тем, что текст не может адекватно отображаться.

Цитата:

Сообщение от laimas

а вот то что направление движения для нашего языка «в арабскую» сторону, это странно.

Ровным счётом как и то странно, что направление движения для арабского языка (и для урду, персидского, пушту и пр.) «в нашу», как вы выразились, сторону!

<div id="text" style="font-size: 2em;">Бегущаяя строка! </div>

  <script>
    text.innerHTML = text.innerHTML.replace(/./gi, '<span>$&</span>');
    setInterval(() => text.appendChild(document.querySelector('span')), 50);
  </script>