라이브 타이핑으로 이모티콘을 다시 이모티콘으로

지난 시간에 제가 커버해 드렸으니 즐감하시길 바랍니다. 이번에는 <input/> 또는 <textarea/>에 실시간 입력 이모티콘으로 기능을 개선하여 이모티콘을 생성합니다. 보시다시피, 많은 상황에서 이 라이브 타이핑은 전체 텍스트를 이모티콘으로 변환하는 것보다 훨씬 더 즐겁습니다. 그래서 여기에서 시작합니다.

코드

UI

여기에서 코드를 기본 html 파일에 복사합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Emoticons to Emojis</title>
        <script src="regex.js"></script>
        <script src="run.js"></script>
    </head>
    <body>
        <h1>Emoticons to Emojis live typing
        </h1>
        <p>Type emoticons in the textarea below to see emojis :D</p>
        <div>
            <textarea id="live" rows="10" cols="80"></textarea>
        </div>
    </body>
</html>

도우미 라이브러리 가져오기

내가 작성한 스크립트는 https://github.com/wyantb/js-regex에서 정규식 빌더를 사용하므로 https://github.com/wyantb/js-regex/raw/master/regex.js에서 스크립트 파일을 가져와 디렉토리에 넣습니다. 그 이름은 html에서 참조하는 regex.js입니다.

메인 스크립트 파일 생성

run.js 파일을 만들고 다음 코드를 복사합니다.

let emoticons = {
    "(:": "🙃",
    ":)": "🙂",
    ":')": "🥲",
    ":))": "😂",
    "=))": "🤣",
    ";)": "😉",
    ":D": "😀",
    ":P": "😋",
    "B)": "😎",
    ":*": "😗",
    ":(": "🙁",
    ":'(": "😥",
    ":((": "😭",
    ":o": "😮",
    ">:(": "😠",
    ">:-(": "😡",
}

const pattern = (function () {
    let r = regex.create().either();
    let cmp = function (a, b) {
        let d = a.length - b.length;

        if (d)
            return -d;

        if (a < b)
            return -1;

        if (a > b)
            return 1;

        return 0;
    }

    for (let key of Object.keys(emoticons).sort(cmp))
        r.literals(key)

    return new RegExp(r.endEither().peek(), "gu");
})();

const mlength = (function () {
    let m = 0;

    for (let key of Object.keys(emoticons))
        if (key.length > m)
            m = key.length;

    return ++m;
})();

function getEmoji(emoticon) {
    if (emoticon in emoticons)
        return emoticons[emoticon];

    return "";
}

function cvE2E(str) {
    return str.replaceAll(pattern, getEmoji)
}

function handleInput(e) {
    if (e.type == "input" && e.inputType == "insertText" && e.data == " ") {
        let input = e.target;
        let start = Math.max(input.selectionEnd - mlength, 0) | 0;

        input.setSelectionRange(start, input.selectionEnd);

        let replaced = cvE2E(input.value.substring(start, input.selectionEnd));

        input.setRangeText(replaced, start, input.selectionEnd, 'end');
    }
}

function install(input) {
    input.addEventListener('input', handleInput);
}

document.addEventListener('DOMContentLoaded', function () {
    install(document.getElementById('live'));
});

작동 방식 이해

이모티콘에 실시간으로 이모티콘을 입력하려면 input 또는 input 함수의 textarea 이벤트에 리스너를 연결해야 하므로 install 및 handleInput 함수입니다. 사용자가 공백을 입력할 때마다 텍스트를 추출하고 찾은 이모티콘을 이모티콘으로 변환한 다음 요소에 다시 넣습니다. 교체에 대해서는 이전 기사(위 링크)를 읽고 주요 아이디어를 얻을 수 있습니다. 이번에는 아이디어는 기본적으로 동일하지만 성능을 향상시키기 위해 약간의 트릭을 수행해야 합니다. 전체 텍스트를 추출하는 대신 selectionEnd 속성이 나타내는 입력 위치에서 짧은 하위 문자열을 추출합니다. 길이를 알기 위해 emoticons 개체의 키를 반복하여 이모티콘의 최대 길이를 찾고(삽입된 공백도 계산하려면 길이를 1로 늘려야 함) mlength 상수에 저장해야 합니다. 따라서 이제 사용자가 공백을 삽입할 때 삽입된 위치에서 mlength 문자가 포함된 하위 문자열을 뒤로 추출하고 교체를 수행하면 됩니다. 그런 다음 텍스트를 다시 넣으면 라이브 타이핑 결과가 나타납니다.

다시 한 번 글을 보시고 재미있는 이모티콘 입력 하시길 바랍니다^^

Reference

이 문제에 관하여(라이브 타이핑으로 이모티콘을 다시 이모티콘으로), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/namdx1987/emoticons-to-emojis-again-with-live-typing-ipl

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

라이브 타이핑으로 이모티콘을 다시 이모티콘으로

코드

UI

도우미 라이브러리 가져오기

메인 스크립트 파일 생성

작동 방식 이해

Reference

좋은 웹페이지 즐겨찾기