Question

我正在尝试用图像替换表情符号代码。大部分脚本都运行正常。但是我对表情符号代码>:(和<3)有些麻烦。表情符号代码<3)根本不起作用，没有任何内容被替换。表情符号>:(被表情符号:(的表情符号替换，>符号留在前面。

为什么<3)没有被替换？
当>:(高于:(时，为什么>:(会被:(的代码取代在对象？

//-------------------------------------------------
// 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值。因此，只有 last 匹配才能确定对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);
});

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

1 个答案: