如何在网页上显示心形符号 unicode？答案

【问题标题】：How to display heart symbols unicode to webpage?如何在网页上显示心形符号 unicode？
【发布时间】：2019-01-05 22:07:31
【问题描述】：

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

这是我的表格一个示例列表代码：

  <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>

这是我的引导模式代码：

    <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一样在屏幕上显示。但它正在将此代码转换为符号。我该如何解决？

【问题讨论】：

标签： javascript html unicode-string

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

看来您必须使用代码 ♥。

这就是你要找的吗？

【讨论】：

我想在我的引导模式中完全显示此代码&#9829，但是当我将它传递到我的 javascript on click 函数时，例如 onClick="sendvalue(''♥')"所以在模态它正在将此代码转换为符号。但我想将此代码完全显示为模态。