Как отобразить символы сердца Unicode на веб-странице? - PullRequest
Новая
       37

Как отобразить символы сердца Unicode на веб-странице?

0 голосов
/ 06 января 2019

У меня есть таблица, в которой есть список символов с их деталями, и по нажатию кнопки 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;
    }

Проблема в том, что в модальном юникоде происходит преобразование в символ, но я хочу показать этот символ в виде HTML-кода, точно так же, как я передаю этот код #10084 в виде строки в функцию, а затем в функцию, добавляя & к ней внутри функции показывать на экране как &#10084. Но это преобразование этого кода в символ. Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Вместо использования innerHTML используйте innerText или textContent.

Проще говоря, использование innerHTML говорит браузеру отрисовать то, что описывает сущность, тогда как innerText будет анализировать текст самостоятельно.

Используя другие параметры, вы, конечно, не можете использовать теги <b></b>, так как они также будут отображаться как текстовые значения. Однако вы можете переключаться между вводом строк с помощью innerHTML и innerText.

0 голосов
/ 06 января 2019

Я считаю, что ваш ответ должен быть по следующему адресу: http://www.javascripter.net/faq/mathsymbols.htm

Похоже, вы должны использовать код & # 9829.

Это то, что вы искали?

...