在标题属性中使用HTML实体是不可能的吗？

Question

上面的截图来自Firefox。光标悬停在图像左侧的黄点上。它是一个<img>元素（实际上它是一个包含单个圆形<area>元素的图像映射，但我认为这种区别不重要），它是通过JavaScript创建和样式化的，包括应用标题属性（通过剪切和粘贴字符串构建）。如何让它表现出预期的字符——短横线，而不是–？对于innerHTML，它可以正常工作（顶部中间左侧的“Barrow-In-Furness”文本框也是使用JavaScript创建的，并设置了其innerHTML）。

编辑：回答Domenic的问题，以下是构建和应用标题属性的JavaScript函数（除了执行其他工作）：

var StyleLinkMarker = function (LinkNumber, EltA, EltI) {
    var AltText = LocationName[LinkStart[LinkNumber]] +
                  " to " +
                  LocationName[LinkEnd[LinkNumber]];
    if (!EltA) {
        EltA = document.getElementById("link_marker_area" + LinkNumber);
        EltI = document.getElementById("link_marker_img" + LinkNumber);
    }
    if (LinkStatus[LinkNumber] === 9) {
        var CanBuyLinkCode = BoardPreviewMode ? 0 : CanBuyLink(LinkNumber);
        if (CanBuyLinkCode === 0) {
            EltI.src = ImagePath + "icon-buylink-yes.png";
            AltText += " (you can buy this " + LinkAltTextDescription + ")";
        } else {
            EltI.src = ImagePath + "icon-buylink-no.png";
            AltText += " (you cannot buy this " + LinkAltTextDescription;
            AltText += CanBuyLinkCode === 1 ?
                       ", because you aren't connected to it)" :
                       ", because you would have to buy coal from the Demand Track, and you can't afford to do that)";
        }
    } else if ( LinkStatus[LinkNumber] === 8 ||
                (LinkStatus[LinkNumber] >= 0 && LinkStatus[LinkNumber] <= 4)
                ) {
        EltI.src = ImagePath + "i" + LinkStatus[LinkNumber] + ".png";
        if (LinkStatus[LinkNumber] === 8) {
            AltText += " (orphan " + LinkAltTextDescription + ")";
        } else {
            AltText += " (" +
                       LinkAltTextDescription +
                       " owned by " +
                       PersonReference(LinkStatus[LinkNumber]) +
                       ")";
        }
    } else {
        throw "Unexpected Link Status";
    }
    EltA.alt = AltText;
    EltA.title = AltText;
};

LocationName 的含义如下：

var LocationName = [
    "Barrow–In–Furness", "Birkenhead",                "Blackburn", "Blackpool",
                           "Bolton",    "Burnley",                     "Bury",     "Colne",
                   "Ellesmere Port",  "Fleetwood",                "Lancaster", "Liverpool",
                     "Macclesfield", "Manchester",             "The Midlands", "Northwich",
                           "Oldham",    "Preston",                 "Rochdale",  "Scotland",
                        "Southport",  "Stockport", "Warrington & Runcorn",     "Wigan",
                        "Yorkshire"
];

- Hammerite

---

你确定 – 没有被编码两次，像这样：–？ - Mark

你是如何设置title属性的呢？以下代码可以正常工作：<span title="test–test">测试我</span> - Domenic

@Mark：我有信心这不是双重编码。特别地，如果它是双重编码，我应该期望图像左上角中间的粗体Verdana文本也会将HTML实体文字直接显示出来，而不是正确地显示预期字符。因为div的内容是从同一JavaScript字符串创建的。 - Hammerite

Answer 1

你没有设置标题属性，而是设置了标题属性，它期望的是文本而不是HTML（尽管setAttribute方法也期望一个文本字符串）。

一般来说，在处理DOM操作时，你提供文本而不是HTML。 .innerHTML是这个规则的一个显著例外。

- Quentin

---

我明白了。我该如何设置标题属性？ - Hammerite

通过使用innerHTML爆炸性地清除父元素的所有内容并替换它，这不是一个好主意。最好获取文本格式的数据而不是HTML格式的数据。（虽然您可以将span的innerHTML设置为第一个子节点的textNode的data（我不建议这样做），但最好从源中获取未经HTML编码的数据） - Quentin

我通过使用UTF-8文本而非HTML成功使其工作。我原本期望LocationName中的另一个元素中的字面和号将导致页面无法验证，但似乎会发生一些魔法将其转换为实体。在JavaScript中没有将文本与HTML实体之间进行转换的方法吗？这似乎令人惊讶。 - Hammerite

你有一些HTML代码，它被传递给浏览器。浏览器将其转换为DOM。然后JavaScript在DOM上操作，不关心它最初是HTML，因此实体无意义。 - Quentin

Answer 2

这是一种将HTML转换为文本的简单方法：

。

function convertHtmlToText(value) {
    var d = document.createElement('div');
    d.innerHTML = value;
    return d.innerText;
}

您的代码可以更新为以下内容：

：

EltA.title = convertHtmlToText(AltText);

- Michael Best

---

这是一个非常实用的解决方案，谢谢！很遗憾没有本地方法可以做到，但这种方法有一些优雅之处。 - David John Welsh