Question

我有一个带有表单的网页。在用户填写所有必填字段之前，“提交”按钮应保持停用状态。当他们填写字段时，旁边会出现一个复选标记。当所有的复选标记都在那里时，我们很高兴。

复选标记可能由以下代码设置：

if (whatever) checkLocation.innerHTML = CHECKMARK;

这是我用来做最后检查的代码。它只是循环遍历可能有复选标记的所有位置。如果找到没有标记的位置，则会禁用提交按钮并离开。如果它全部通过它们，它会激活按钮并返回true。

function checkSubmitButton() {
    var button = document.getElementById(SUBMIT_BUTTON);
    for (var i=0; i<CHECK_LOCATIONS.length; i++) { // should be for-each, but JS support is wonky
        var element = document.getElementById(CHECK_LOCATIONS[i]);
        console.log(CHECK_LOCATIONS[i] +": " +element.innerHTML);

        // if found unchecked box, deactivate & leave
        if (element.innerHTML != CHECKMARK) {
            button.disabled = true;
            return false;
        }
    }

    // all true--activate!
    console.log("ACTIVATING BUTTON!");
    button.disabled = false;
    return true;
}

问题在于：只要const CHECKMARK包含一些简单的内容，例如"X"，这就有效。但规范要求使用特殊的HTML字符：在这种情况下✓或✓。当我进行比较时（在if行中），它最终将字符串"✓"与字符串"✓"进行比较。由于这两者不相等，因此无法识别有效的复选标记，并且按钮永远不会激活。如何比较我的常量HTML元素的内容？（并且希望使代码能够工作，即使在路上有人用其他东西替换了复选标记。）

感谢。

Answer 1

检查字符没有问题，它的行为与X字符完全相同。问题是，你的html将复选标记字符存储为十六进制字符串中的html实体。如果您将复选标记与复选标记进行比较，则可以正常运行：https://jsfiddle.net/m7yoh026/

您可以做的是确保CHECKMARK变量是实际的复选标记字符，而不是html实体。

其他选项是解码html实体：https://jsfiddle.net/m7yoh026/3/

var CHECKMARK = '&#x2713;'

var decoded_checkmark = $('<textarea />').html(CHECKMARK).text();

console.log($('div')[0].innerHTML)
if ($('div')[0].innerHTML == decoded_checkmark) {
    $('body').append('checkmark recognized<br>')
}

Answer 2

您可以将字符转换为与其等效的HTML实体：

var encoded = raw.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

Answer 3

嗯，这就是我最终做的事情：我创建了一个名为encodeHtml()的函数，它接受一个字符或字符串，将其写入全新的div，然后返回包含在div中的内容。 1}}：

function encodeHtml(character) {
    var element = document.createElement("div");
    element.innerHTML = character;
    return element.innerHTML;
}

然后我可以与它返回的内容进行比较，因为它会自动将"✓"更改为"✓"，并且可以对该字符进行任何无法预料的更改。这有点像kludge，但它的确有效。（我仍然不清楚为什么JavaScript会进行这种自动转换......但是有很多设计选择让JavaScript迷惑我，所以你去。）

感谢大家的帮助。

当涉及到特殊字符时，如何比较JavaScript innerHTML返回值？

3 个答案: