javascript - 对象中的 2 个表情符号未正确替换 javascript

Question

我正在尝试用图像替换表情符号代码。大多数脚本工作正常。但是我在表情符号代码方面遇到了一些问题 >:(和 <3) .表情码<3)根本不起作用，没有任何东西被替换。还有表情码>:(替换为表情符号代码 :( 的表情符号和 >标志留在前面。

1. 为什么是<3)没有被替换？

2. 为什么是>:(替换为 :( 的代码什么时候>:(在:(之上 在对象中？

//-------------------------------------------------
// Replace emoticons with images
//-------------------------------------------------

$(document).ready(function() {
    var emoticons = [
        { "code" : /:\)/ , "img" : "smile.svg" },
        { "code" : /;\)/ , "img" : "wink.svg" },
        { "code" : /:\*/ , "img" : "kiss.svg" },
        { "code" : /:\// , "img" : "unsure.svg" },
        { "code" : /:'\(/ , "img" : "cry.svg" },
        { "code" : /:p/ , "img" : "tongue.svg" },
        { "code" : /:D/ , "img" : "grin.svg" },
        { "code" : />:\(/ , "img" : "grumpy.svg" },
        { "code" : /:o/ , "img" : "astonished.svg" },
        { "code" : /:O/ , "img" : "afraid.svg" },
        { "code" : /8-\)/ , "img" : "nerd.svg" },
        { "code" : /8\)/ , "img" : "sunglasses" },
        { "code" : /:@/ , "img" : "angry.svg" },
        { "code" : /:\(/ , "img" : "frowny.svg" },
        { "code" : /<3\)/ , "img" : "love.svg" },
        { "code" : /:s/ , "img" : "confused.svg" },
        { "code" : /-_-/ , "img" : "dejected.svg" },
        { "code" : /\^\^/ , "img" : "laugh.svg" },
        { "code" : /:\|/ , "img" : "big_eyes.svg" },
        { "code" : /:x/  , "img" : "silent.svg" }
    ];

    $("#text-editor__box").on("keyup", function () {
        var element = document.getElementById("text-editor__box");
        var content = $("#text-editor__box")[0].innerHTML;

        for (var i = 0; i < emoticons.length; i++) {
            if(content.match(emoticons[i]["code"])) {
                $("#text-editor__box")[0].innerHTML = content.replace(emoticons[i]["code"], emoticons[i]["img"]);
            }
        }
    });
});

div { border: 1px solid; min-height: 1.2em }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable id="text-editor__box"></div>

Answer 1

原因是您不是在阅读纯文本，而是在阅读 HTML(通过 innerHTML )，而在 HTML 中是文字 <编码为 < .同样>是> .

解决方案是阅读带有 textContent 的内容属性代替:

    var content = $("#text-editor__box")[0].textContent;

或者为什么不完全使用 jQuery:

    var content = $("#text-editor__box").text();

第二个问题的发生是因为您一直在使用相同的 content值，即使在对 innerHTML 进行了更改之后的元素。因此，只有最后 匹配才能确定对innerHTML 的最终分配。 .

您可以通过首先对 content 进行所有更改来解决此问题字符串，并且只更新 innerHTML循环后:

$("#text-editor__box").on("keyup", function () {
    var content = $("#text-editor__box").text(),
        changed = false;
    for (var i = 0; i < emoticons.length; i++) {
        if(content.match(emoticons[i]["code"])) {
            content = content.replace(emoticons[i]["code"], emoticons[i]["img"]);
            changed = true;
        }
    }
    if (changed) $("#text-editor__box").html(content);
});