Создать модный / альтернативный текст - PullRequest
Новая
       19

Создать модный / альтернативный текст

0 голосов
/ 22 декабря 2019

Мне любопытно, как можно создать веб-страницу, которая позволяет вводить текст и динамически отображать его в разных стилях с помощью JavaScript.

Так же, как: ρ૨εѵเεω ƭεאƭ (Источник)

Редактировать: нашел это (SO Вопрос) 

function Demo() {

    const style1 = {
        'a' : '?',
        'b' : '?',
        'c' : '?',
        'd' : '?',
    };

    const style2 = {
        'a' : '?',
        'b' : '?',
        'c' : '?',
        'd' : '?',
    };

    function strtr(s, p, r) {
        return !!s && {
            2: function () {
                for (var i in p) {
                    s = strtr(s, i, p[i]);
                }
                return s;
            },
            3: function () {
                return s.replace(RegExp(p, 'g'), r);
            },
            0: function () {
                return;
            }
        }[arguments.length]();
    }

    const input = document.querySelector('#input');
    const style = style1; // Text style
    let outputt = strtr(input, style);
    console.log(outputt);


  return (
        <div>
          <Form>
            <Form.Item>
              <Input id="input" placeholder="input text" />
            </Form.Item>
          </Form>
        </div>

      <div>
        <p>Style One:</p>
        <Form>
            <Form.Item>
              <Input size="large" id="output"/>
            </Form.Item>
          </Form>
      </div>
  );
}

export default Demo;

Но я вывод не выдает в форме. Делая некоторый прогресс все же

1 Ответ

2 голосов
/ 22 декабря 2019

Допустим, у вас есть массив букв с разными стилями (на любом языке программирования здесь мы будем использовать Javascript).

Стили необходимо расширить и добавить больше .. Я только пытался привести тебе пример. 

const style1 = {
    'a' : '?',
    'b' : '?',
    'c' : '?',
    'd' : '?',
};
const style2 = {
    'a' : '?',
    'b' : '?',
    'c' : '?',
    'd' : '?',
};

function strtr(s, p, r) {
    return !!s && {
        2: function () {
            for (var i in p) {
                s = strtr(s, i, p[i]);
            }
            return s;
        },
        3: function () {
            return s.replace(RegExp(p, 'g'), r);
        },
        0: function () {
            return;
        }
    }[arguments.length]();
}

const str = 'abc'; // Text
const style = style1; // Text style
let output = strtr(str, style);
console.log(output);

Обновление

Внутри класса в методе contructor() нам необходимо определить наше состояние: 

constructor(props) {
    super(props);
    this.state = {output: ""};
}

Также в JSX: 

<p>Style One:</p>
<div>{this.state.output}</div>

Наконец, в обратном вызове addEventListener: 

this.setState({output: String.fromCharCode(55349, code + 56658)});
...