Question

我很好奇如何构建一个网页，该网页允许您输入文本并使用javascript动态显示不同的样式。

很像：ρ૨εѵเεω ƭεאƭ (Source)

编辑：找到了这个(SO Question)

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;

但是我的输出没有以表单呈现。仍然取得一些进展

Answer 1

假设您有一系列样式不同的字母（在任何编程语言中，我们将使用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)});

生成花哨/替代文字

1 个答案: