如何将心形符号unicode显示到网页？

Question

我在 table 中有符号列表及其详细信息，单击 Get Code 按钮后，我将值传递给模态以显示听到符号的详细信息给模态。

这是我的 table 示例列表代码：

  <tr>
    <td style="font-size: 30px;">❤</td>
    <td>Classic Heart Emoji</td>
    <td>
    <button type="button" class="code-btn" data-toggle="modal" data-target="#exampleModal"
    onClick="sendvalue('Classic Heart Emoji','#x2764','#10084','U+2764','Heavy black Heart','Dingbats','&#x2764');">Get
            Code</button></td>
</tr>

这是我的 bootstrap 模态代码：

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Symbol Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span class="white" aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row ml-0 mr-0">
                    <div class="col-md-4 col-12">
                        <div class="modal-emoji" id="mysymbol" style="font-size:75px">
                        </div>
                    </div>
                    <div class="col-md-8 col-12">
                        <h3 class="site-text grey" id="title">
                            <br>
                        </h3>
                        <div class="custom-text" id="symbol">
                        </div>
                        <p class="site-text grey" id="code">
                            <br>
                        </p>
                        <p class="site-text grey" id="unicode">
                            <br>
                        </p>
                        <p class="site-text grey" id="unicodename">
                            <br>
                        </p>
                        <p class="site-text grey" id="unicodeblock">
                            <br>
                        </p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="code-btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

这是我的 js 函数：

function sendvalue(title, html1, html2, unicode, unicodename, unicodeblock, symbol) {
        console.log(html1, html2,unicode)
        document.getElementById("mysymbol").innerHTML = symbol;
        document.getElementById("title").innerHTML = title;
        document.getElementById("symbol").innerHTML = "Symbol / Emoji: " + symbol;
        document.getElementById("code").innerHTML = '&'+html1+"; OR "+'&'+html2+";";
        document.getElementById("unicode").innerHTML = "<b>Unicode   :   <b>" + unicode;
        document.getElementById("unicodename").innerHTML = "<b>Unicode Name  : </b> " + unicodename;
        document.getElementById("unicodeblock").innerHTML = "<b>Unicode Block  : </b> " + unicodeblock;
    }

问题是当模态 unicode 转换为符号时，但我想显示该符号 html 等价代码，就像我将此代码 #10084 作为字符串传递给函数然后传递给函数一样在函数内部附加 & 以在屏幕上显示 &#10084。但它正在将此代码转换为符号。我该如何解决？

Answer 1

我相信你的答案应该在下面url：http://www.javascripter.net/faq/mathsymbols.htm

看来您必须使用代码 ♥.

这是您要找的吗？

Answer 2

不要使用 innerHTML，而是使用 innerText 或 textContent。

简单地说，使用 innerHTML 告诉浏览器呈现 实体描述的内容，而 innerText 将自行解析文本。

使用其他选项，您当然可以不使用 <b></b> 标签，因为这也将呈现为文本值。但是，您可以在使用 innerHTML 和 innerText.
的输入字符串之间切换

如何将心形符号unicode显示到网页？

How to display heart symbols unicode to webpage?

html

javascript

unicode-string