时间戳

首页 > 解决方案 > 生成花哨/替代文本

javascript - 生成花哨/替代文本

问题描述

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

很像：（ρ૨εѵเεω ƭεאƭ 来源）

编辑：找到这个（所以问题）

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;

但是我的输出没有呈现在表单中。还是取得了一些进展

标签： javascriptreactjsunicode

解决方案

假设您有一组具有不同样式的字母（在任何编程语言中，我们将使用 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's 回调中：

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

推荐阅读