문자열의 각 개별 문자에 알리고 싶지만 어떻게해야하는지 잘 모르겠습니다.

따라서 내가 가지고 있다면 :

var str = 'This is my string';

나는 T, h, i, s 등을 별도로 경고 할 수 있기를 원합니다. 이것은 제가 작업하고있는 아이디어의 시작일 뿐이지 만 각 문자를 개별적으로 처리하는 방법을 알아야합니다.

jQuery를 사용하고 문자열 길이를 테스트 한 후 split 함수를 사용해야 할 수도 있다고 생각했습니다.

아이디어?

경고 순서가 중요한 경우 다음을 사용하십시오.

for (var i = 0; i < str.length; i++) {
  alert(str.charAt(i));
}

경고 순서가 중요하지 않은 경우 다음을 사용하십시오.

var i = str.length;
while (i--) {
  alert(str.charAt(i));
}

var str = 'This is my string';

function matters() {
  for (var i = 0; i < str.length; i++) {
    alert(str.charAt(i));
  }
}

function dontmatter() {
  var i = str.length;
  while (i--) {
    alert(str.charAt(i));
  }
}

<p>If the order of alerts matters, use <a href="#" onclick="matters()">this</a>.</p>

<p>If the order of alerts doesn't matter, use <a href="#" onclick="dontmatter()">this</a>.</p>

아마도 해결 된 것 이상입니다. 다른 간단한 솔루션으로 기여하고 싶습니다.

var text = 'uololooo';

// With ES6
[...text].forEach(c => console.log(c))

// With the `of` operator
for (const c of text) {
    console.log(c)
}

// With ES5
for (var x = 0, c=''; c = text.charAt(x); x++) { 
    console.log(c); 
}

// ES5 without the for loop:
text.split('').forEach(function(c) {
    console.log(c);
});

순수한 자바 스크립트에서 가능한 해결책은 다음과 같습니다.

for (var x = 0; x < str.length; x++)
{
    var c = str.charAt(x);
    alert(c);
}

각 텍스트를 처리하는 방법 (벤치 마크 포함)

https://jsperf.com/str-for-in-of-foreach-map-2

...에 대한

권위 있는 과 지금까지 가장 성능이 뛰어난 제품 . 성능 결정 알고리즘에서 사용할 계획이거나 브라우저 버전과의 최대 호환성이 필요한 경우이 기능을 사용해야합니다.

for (var i = 0; i < str.length; i++) {
  console.info(str[i]);
}

...의

...의 새로운 ES6입니다 반복자를위한 입니다. 대부분의 최신 브라우저에서 지원합니다. 시각적으로 더 매력적이며 실수를 입력하는 경향이 적습니다. 프로덕션 응용 프로그램 에서이 작업을 수행하려는 경우 Babel 과 같은 변환기를 사용해야합니다 .

let result = '';
for (let letter of str) {
  result += letter;
}

각각

기능적 접근. 에어 비앤비 승인 . 이 방법으로 수행 할 때의 가장 큰 단점 split()은, 문자열의 각 개별 문자를 저장할 새 배열을 만듭니다.

왜? 이것은 우리의 불변의 규칙을 강제합니다. 값을 반환하는 순수한 함수를 다루는 것이 부작용보다 추론하기 쉽습니다.

// ES6 version.
let result = '';
str.split('').forEach(letter => {
  result += letter;
});

또는

var result = '';
str.split('').forEach(function(letter) {
  result += letter;
});

다음은 내가 싫어하는 것입니다.

...에서

for ... of와 달리 문자 대신 문자 색인을 얻습니다. 꽤 나쁘게 수행합니다.

var result = '';
for (var letterIndex in str) {
  result += str[letterIndex];
}

지도

좋은 기능 접근. 그러나 map은 그 용도로 사용되지 않습니다. 배열 내부의 값을 변경해야 할 때 사용해야하지만, 그렇지 않습니다.

// ES6 version.
var result = '';
str.split('').map(letter => {
  result += letter;
});

또는

let result = '';
str.split('').map(function(letter) {
  result += letter;
});

유니 코드 BMP (Basic Multilingual Plane) 외부의 문자열에 문자가있을 때마다 문자가 깨질 수 있기 때문에 대부분의 대답이 여기에 해당되지는 않습니다 . 즉, 모든 이모지가 깨질 것입니다 됩니다.

JavaScript는 모든 문자열에 UTF- 16 유니 코드를 사용합니다. UTF-16에서 BMP 이외의 문자는 " 대리 쌍 "이라는 두 부분으로 구성됩니다. " 여기에서 대부분의 답변은 해당 쌍의 각 부분을 단일 문자가 아닌 개별적으로 처리합니다.

2016 년 이후 현대 JavaScript에서 한 가지 방법은 새로운 String iterator 를 사용하는 것 입니다. 다음은 MDN에서 나온 예제 (거의)입니다.

var string = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A';

for (var v of string) {
  alert(v);
}
// "A"
// "\uD835\uDC68"
// "B"
// "\uD835\uDC69"
// "C"
// "\uD835\uDC6A"

당신은 이것을 시도 할 수 있습니다

var arrValues = 'This is my string'.split('');
// Loop over each value in the array.
$.each(arrValues, function (intIndex, objValue) {
    alert(objValue);
})

하나 더 해결책 ...

var strg= 'This is my string';
for(indx in strg){
  alert(strg[indx]);
}

짧은 코드 나 하나의 라이너를 작성해야 할 때이 "해킹"을 사용합니다.

'Hello World'.replace(/./g, function (char) {
    alert(char);
    return char; // this is optional 
});

이것은 개행을 계산하지 않으므로 좋은 일이거나 나쁜 일이 될 수 있습니다. 당신은 어떤 줄 바꿈을 포함 할 경우, 교체 : /./와 /[\S\s]/. 다른 하나 - 라이너 당신은 아마 사용 볼 수 .split()있는 많은 문제를 가지고

새로운 JS는 이것을 허용합니다 :

const str = 'This is my string';
Array.from(str).forEach(alert);

바이트 크기가 다르기 때문에 문자열에 유니 코드 문자가 포함되어 있으면 for ... of 문을 사용하는 것이 좋습니다.

for(var c of "tree 木") { console.log(c); }
//"𝐀A".length === 3

짧은 대답 : Array.from(string)아마도 당신이 원하는 것을 줄 것이고 배열이기 때문에 또는 그것을 반복 할 수 있습니다.

다음 문자열로 시도해 봅시다 : abc|⚫️\n⚪️|👨‍👩‍👧‍👧.

코드 포인트는 다음과 같습니다.

97
98
99
124
9899, 65039
10
9898, 65039
124
128104, 8205, 128105, 8205, 128103, 8205, 128103

따라서 일부 문자에는 하나의 코드 포인트 (바이트)가 있고 일부 문자에는 둘 이상의 코드가 있으며 추가 테스트를 위해 줄 바꿈이 추가되었습니다.

테스트 후 두 가지 방법이 있습니다.

• 바이트 당 바이트 (코드 포인트 당 코드 포인트)
• 캐릭터 그룹 (가족 이모티콘은 아님)

string = "abc|⚫️\n⚪️|👨‍👩‍👧‍👧"

console.log({ 'string': string }) // abc|⚫️\n⚪️|👨‍👩‍👧‍👧
console.log({ 'string.length': string.length }) // 21

for (let i = 0; i < string.length; i += 1) {
  console.log({ 'string[i]': string[i] }) // byte per byte
  console.log({ 'string.charAt(i)': string.charAt(i) }) // byte per byte
}

for (let char of string) {
  console.log({ 'for char of string': char }) // character groups
}

for (let char in string) {
  console.log({ 'for char in string': char }) // index of byte per byte
}

string.replace(/./g, (char) => {
  console.log({ 'string.replace(/./g, ...)': char }) // byte per byte
});

string.replace(/[\S\s]/g, (char) => {
  console.log({ 'string.replace(/[\S\s]/g, ...)': char }) // byte per byte
});

[...string].forEach((char) => {
  console.log({ "[...string].forEach": char }) // character groups
})

string.split('').forEach((char) => {
  console.log({ "string.split('').forEach": char }) // byte per byte
})

Array.from(string).forEach((char) => {
  console.log({ "Array.from(string).forEach": char }) // character groups
})

Array.prototype.map.call(string, (char) => {
  console.log({ "Array.prototype.map.call(string, ...)": char }) // byte per byte
})

var regexp = /(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g

string.replace(regexp, (char) => {
  console.log({ 'str.replace(regexp, ...)': char }) // character groups
});

이제 배열을 사용하는 객체 ( 이 경우) 의 기본 반복자 String.prototype[@@iterator]인 잘 알려진 Symbol 유형의 값을 반환하는 을 사용하여 문자열에 포함 된 개별 유니 코드 코드 포인트를 반복 할 수 있습니다 .Symbol.iteratorString

예제 코드 :

const str = 'The quick red 🦊 jumped over the lazy 🐶! 太棒了！';

let iterator = str[Symbol.iterator]();
let theChar = iterator.next();

while(!theChar.done) {
  console.log(theChar.value);
  theChar = iterator.next();
}

// logs every unicode character as expected into the console.

레거시 구문을 트립하는 이모티콘 또는 비 로마자와 같은 유니 코드 문자와 함께 작동합니다.

참조 : String.prototype @@ iterator에 대한 MDN 링크 .

이제 키워드 에서 사용할 수 있습니다 .

    var s = 'Alien';
    for (var c in s) alert(s[c]);

개별 문자 배열을 얻을 수 있습니다.

var test = "test string",
    characters = test.split('');

그런 다음 일반 자바 스크립트를 사용하여 반복하거나 그렇지 않으면 jQuery by를 사용하여 문자열의 문자를 반복 할 수 있습니다

var test = "test string";

$(test.split('')).each(function (index,character) {
    alert(character);
});

를 사용하여이 문자열을 문자 배열로 변환 split()한 다음 반복 할 수 있습니다.

const str = "javascript";
const strArray = str.split('');

strArray.map(s => console.log(s));

문자 수준에서 텍스트를 변환하고 마지막에 변환 된 텍스트를 다시 가져 오려면 다음과 같이하십시오.

var value = "alma";
var new_value = value.split("").map(function(x) { return x+"E" }).join("")

단계는 다음과 같습니다.

• 문자열을 문자 배열 (목록)로 분할
• 펑터를 통해 각 캐릭터를 매핑
• 결과 문자 배열을 결과 문자열에 결합

오늘의 JavaScript에서는

Array.prototype.map.call('This is my string', (c) => c+c)

분명히 c + c는 c로하고 싶은 모든 것을 나타냅니다.

이 반환

["TT", "hh", "ii", "ss", " ", "ii", "ss", " ", "mm", "yy", " ", "ss", "tt", "rr", "ii", "nn", "gg"]

이것은 오래된 브라우저에서 작동하며 💩와 같은 UTF-16 문자로 작동합니다.

이것이 가장 호환 가능한 솔루션이어야합니다. 그러나 for루프 보다 성능이 떨어집니다 .

내가 사용하는 정규 표현식 생성 regexpu을

var str = 'My String 💩 ';
var regEx = /(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g


str.replace(regEx, function (char) {
    console.log(char)
});

도움이 되었기를 바랍니다!

당신은 할 수 있습니다 단일 문자 액세스 와 str.charAt(index)나 str[index]. 그러나 후자의 방법은 ECMAScript의 일부가 아니므로 전자의 방법을 사용하는 것이 좋습니다.

각 캐릭터에 애니메이션을 적용하려면 span 요소로 감싸 야합니다.

var $demoText = $("#demo-text");
$demoText.html( $demoText.html().replace(/./g, "<span>$&amp;</span>").replace(/\s/g, " "));

나는 이것이 최선의 방법이라고 생각하고 범위를 처리합니다. (예 : TweenMax 사용)

TweenMax.staggerFromTo ($ demoText.find ( "span"), 0.2, {autoAlpha : 0}, {autoAlpha : 1}, 0.1);

이 코드를 사용해보십시오

    function myFunction() {
    var text =(document.getElementById("htext").value); 
    var meow = " <p> <,> </p>";
    var i;


    for (i = 0; i < 9000; i++) {

        text+=text[i] ;



    }

    document.getElementById("demo2").innerHTML = text;

}
</script>
<p>Enter your text: <input type="text" id="htext"/>

    <button onclick="myFunction();">click on me</button>
</p>