Javascript .indexOf 匹配的 HTML 符号

Question

我以一种非常草率的方式解决了一个问题，正在寻找更好的解决方案。

任务

检查 span 是否包含 HTML 符号（箭头），如果存在，将符号替换为相反的符号。

第一次尝试（未显示执行相反操作的第二个代码片段）

 first=headers[0].querySelector('span')
 if (first.innerHTML.indexOf('↘') !== -1)
                            first.innerHTML=first.innerHTML.substring(0, first.innerHTML.length - 13)
 first.innerHTML+=' ↖'

为什么这不起作用？

因为  ===   但出于某种原因↘ === ↘

说真的！试试这个（在 IE 11 和 chrome 中测试）

<span>test</span>
<script>
    first=document.querySelector('span')
    first.innerHTML+='&nbsp&searr;'
    console.log(first.innerHTML)
</script>

在控制台中你会得到：test ↘

我的丑陋解决方案

我将箭头复制到我的 JS 代码中

if (first.innerHTML.indexOf('↘') !== -1)
                            first.innerHTML=first.innerHTML.substring(0, first.innerHTML.length - 7)
                    first.innerHTML+=' ↖'

那么...解决这个问题的正确方法是什么？

Answer 1

如果您担心代码中出现该字面箭头，则不必担心。如果您的工具链配置正确，那么在您的代码中使用该文字箭头就可以了。

但如果你想避免它，你可以使用 unicode 转义来代替它：

const nwarr = "\u2196";
if (first.innerHTML.indexOf(nwarr) !== -1) {
    first.innerHTML = first.innerHTML.substring(0, first.innerHTML.length - 7);
}
first.innerHTML += '&nbsp;&nwarr;'; // <== Did you mean &searr; here? The opposite of nwarr?

现场示例（在替换中使用↘：

const first = document.getElementById("first");

setTimeout(() => {
    const nwarr = "\u2196";
    if (first.innerHTML.indexOf(nwarr) !== -1) {
        first.innerHTML = first.innerHTML.substring(0, first.innerHTML.length - 7);
    }
    first.innerHTML += ' ↘';
}, 800);

<span id="first">Foo ↖</span>

---

两个旁注：

1。要替换东西，我会使用 replace 而不是 substring 和 +=，尤其是你的代码中没有幻数 (13, 7)：

first.innerHTML = first.innerHTML.replace(/\ \u2196/g, " ↘");

您甚至可以允许某些浏览器使用字符实体而不是字符：

first.innerHTML = first.innerHTML.replace(/\ (?:\↖|\u2196)/g, " ↘");

现场示例（在替换中使用↘：

const first = document.getElementById("first");

setTimeout(() => {
    first.innerHTML = first.innerHTML.replace(/\ (?:\↖|\u2196)/g, " ↘");
}, 800);

<span id="first">Foo ↖</span>

2。我会避免对innerHTML 进行文本操作。如果您分配给它，即使在分配回它已经拥有的内容时，它也会拆除您正在处理的元素中的所有元素（和其他节点），并创建新的替换元素和节点。

例如，您可以旋转文本节点：

const first = document.getElementById("first");

setTimeout(() => {
    handleReplacement(first);
}, 800);

function handleReplacement(el) {
    for (let child = el.firstChild; child; child = child.nextSibling) {
        if (child.nodeType === 1) { // Element
            handleReplacement(child);
        } else if (child.nodeType === 3) { // Text
            child.nodeValue = child.nodeValue.replace(/\u00A0\u2196/g, "\u00A0\u2198");
        }
    }
}

<span id="first">Foo ↖</span>

Answer 2

基于 T.J.克劳德的见解非常好。我将我的测试代码修补到这个：

<span>test&nbsp;&nwarr;</span>
<script>
const nw="\u2196";
const se="\u2198";
first=document.querySelector('span')
if (first.innerHTML.indexOf(nw) !== -1)
   {
    console.log("found arrow");
    first.innerHTML = first.innerHTML.replace(/\u2196/, se);
   }

</script>

感觉就像我们偶然发现了浏览器世界的一个混乱/错误的角落。