如何在网页上显示心脏符号unicode?

时间:2019-01-05 22:07:31

标签: javascript html unicode-string

我在一张桌子上有符号列表及其详细信息,单击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一样显示在屏幕上。但是它将代码转换为符号。我该如何解决?

2 个答案:

答案 0 :(得分:0)

我相信您的答案应位于以下网址:http://www.javascripter.net/faq/mathsymbols.htm

看来您必须使用代码&#9829。

这是您要找的吗?

答案 1 :(得分:0)

使用innerHTMLinnerText代替使用textContent

简单地说,使用innerHTML告诉浏览器呈现实体描述的 ,而innerText则将自身解析为文本。

使用其他选项,您当然不能使用<b></b>标记,因为它也将呈现为文本值。但是,您可以在同时使用innerHTMLinnerText的输入字符串之间进行切换。